Hoe leuke CSS-achtergronden toevoegen aan uw sites

Sep 11, 2025

Procedures

Tijd was een webpagina-achtergrond was een klein betegelingsbeeld - en vaak afschuwelijk, aan de oogballen van elke bezoekers. Vandaag vormen achtergronden de basis van veel online grafisch ontwerp.

Deze revolutie op achtergronden op het web is aangedreven door vooruitgang in CSS. Webstandaarden bieden nu veel meer controle, zodat u een achtergrondpositie zorgvuldig kunt definiëren, met verlopen werken en meerdere achtergronden aan een enkel element toevoegen.

Het bedekken van alles op dit gebied zou een boek vereisen, en dus hebben we een aantal belangrijke startpunten geplukt om u aan de gang te krijgen, en de vreemde keuze-link voor u om verder te verkennen. Genieten!

Voeg CSS-achtergronden toe aan webpagina-elementen

CSS-achtergronden vereisen de achtergrond Shorthand-eigenschap of het gebruik van meer specifieke eigenschappen, zoals (maar niet beperkt tot): Achtergrond kleur achtergrond afbeelding achtergrond achtergrondgrootte achtergrond herhaling en Achtergrond-bijlage Deze kunnen worden gedefinieerd voor de achtergrond van de webpagina (via de lichaam selector) of pagina-elementen zoals koppen, divs, enzovoort.

Op het meest elementaire niveau zou je kunnen gebruiken achtergrond Om een pagina rood te maken:

 Body {
 Achtergrond: rood;
 }

Als u een beetje verder gaat, kunt u een afbeelding toevoegen die horizontaal gecentreerd is, 20px vanaf de bovenkant van de container, niet herhaald en op zijn plaats is bevestigd als de webpagina's:

 Body {
 ACHTERGROND: URL (Afbeelding.png) CENTER 20PX NO-HERhEND VAST;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — Een afbeelding als achtergrond (opmerking: vermijd dit lage contrastniveau in uw eigen ontwerpen)

Als je dat wilde schrijven zonder te gebruiken achtergrond Shorthand, het zou er als volgt uitzien:

 Body {
 Achtergrond-afbeelding: URL (afbeelding.png);
 Achtergrondpositie: Centrum 20px;
 Achtergrond-Herhaal: no-herhaal;
 Achtergrond-bijlage: vast;
 }

Mocht u meerdere achtergronden aan een element willen toevoegen, kunt u komma-afzonderlijke waardeets in de CSS-verklaring. Merk op dat het item er eerst is opgegeven, bovenaan de stapel is, wat betekent dat het 'boven' andere achtergronden wordt weergegeven.

 Body {
 ACHTERGROND: URL (Afbeelding.png) CENTER 20PX NO-HERHAATS VAST, URL (beeld 2.png) Center Center NO-REPEAT FIXED;
 }

In dit geval wordt één afbeelding weergegeven volgens het in het vorige voorbeeld en de 'onder' direct in het midden van het inhoudsgebied.

De grootte van achtergrondafbeeldingen wijzigen

Tot nu toe hebben we vermeden achtergrondgrootte Maar die is behoorlijk belangrijk, omdat het je in staat stelt om de grootte van een achtergrondafbeelding te beheersen. Specifiek kunt u de horizontale en verticale afmetingen van een afbeelding in pixels of percentagevoorwaarden definiëren, zoals:

 Achtergrondformaat: 200px 50px;

Er zijn ook twee trefwoordwaarden, die in plaats daarvan kunnen worden gebruikt: bevatten en Hoes Deze zijn breed vergelijkbaar, bij het verschaffen van een manier om een afbeelding te schalen in het inhoudsgebied van een element. Het verschil is dat bevatten is ontworpen om een zo groot mogelijk beeld te maken, terwijl ze nog steeds alles in het inhoudsgebied laat zien (wat betekent dat je er meestal rondgaat), terwijl Hoes Compleet het inhoudsgebied volledig, maar kan resulteren in een deel van het beeld dat niet zichtbaar is. Dit laatste wordt vaak gebruikt op sites die foto's gebruiken als achtergronden.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — CSS 'bevatten' (boven) versus 'omslag' (onder) waarden

Merk op dat u kunt toevoegen achtergrondgrootte naar een achtergrond Shorthand-definitie - plaats het na de achtergrond waarden, met een voorwaartse slash die de twee scheidt:

 ACHTERGROND: URL (Afbeelding.png) CENTER 20PX / Bevat NO-REPEAT FAST

Gebruik High-Res Retina Achtergrondafbeeldingen

Bij het toevoegen van Retina-achtergronden van hoge resolutie, achtergrondgrootte is ook handig om dergelijke afbeeldingen te forceren om op de juiste maat te verschijnen.

Stel je voor een voorbeeld voor een div Met een ID kaart van logo Dit heeft op geschikte wijze een logo toegepast als achtergrond in CSS. Het is 150 pixels vierkant, en dus de basis CSS die u zou gebruiken is:

 #Logo {
 Breedte: 150px;
 Hoogte: 150px;
 ACHTERGROND: URL (logo.png) NO-REPEAT;
 }

High-res compliceert dingen. We willen geen oudere hardware dwingen om grotere afbeeldingen te laden, en dus moet een mediacyquery worden gebruikt om het logo met een hogere resolutie alleen op ondersteunde hardware te laden.

 @Media (-webkit-min-apparaat-pixel-ratio: 2),
 (min-resolutie: 192dpi) {
  #logo {
   Achtergrond-afbeelding: URL ([email protected]);
  
 }

Het probleem is nu de afbeelding van @ 2x high-res is 300 pixels vierkant (omdat het tweemaal de resolutie van het origineel heeft), maar gebruikt als de achtergrond voor een 150-pixel-vierkante container. Dus op dit punt zie je alleen een kwart van.

A high-res image before a resize fix — Een afbeelding met hoge resolutie vóór een formaat-fix

Dit wordt vastgesteld door een specifiek toe te wijzen achtergrondgrootte waarde voor #logo

 #Logo {
 Breedte: 150px;
 Hoogte: 150px;
 ACHTERGROND: URL (logo.png) NO-REPEAT;
 Achtergrondformaat: 150px 150px;
 }

Het high-res-logo, nu precies in de container

Een meer moderne methode voor het werken met meerdere achtergrondresoluties en het bereiken van hetzelfde resultaat is CSS4's imago-set

 #Logo {
 Achtergrond-afbeelding: beeldset (
  URL (logo.png) 1x,
  URL ([email protected]) 2x
  
 }

De voordelen van imago-set zijn eenvoudiger CSS en de gebruikersagent die het beeld bepaalt dat moet worden gebruikt. Het nadeel is browsersondersteuning - op het moment van schrijven - blijft onvolledig. Bezoek deze testpagina Voor een snelle manier om te controleren hoe browsers u tarief ondersteunt. (Dit is misschien waarom veel ontwerpers Gebruik scripts om te automatiseren dienen met afbeeldingen van hoge resolutie

Werk met alfakanalen en verlopen

Onze uiteindelijke tip in dit laaiend snel (in website-tutorial-termen) Artikel heeft betrekking op alfakanalen en hellingen. Toen het internet werd gestoken, had u vaak ontwerpers die 'Checkerboard'-gifs gebruikt om alfakanalen te simuleren (elke andere pixel was transparant). Nu wijst u alleen kleuren toe in RGBA:

 Hoofd {
 Achtergrond: RGBA (255,255,255,0, 7);
 }

In het bovenstaande voorbeeld zou de achtergrond 70 procent wit zijn, waardoor er onder de onderstaande is om doorheen te laten zien. Je moet voorzichtig zijn om duidelijkheid te behouden bij het gebruik van semi-transparante achtergronden die boven complexe beelden zijn, maar ze kunnen geweldig zijn voor het toevoegen van visuele interesse voor webpagina's.

Alpha channels, gradients, and some questionable colour choices — Alpha-kanalen, hellingen en enkele twijfelachtige kleurenkeuzes

Evenzo werden webontwerpers gebruikt om te vervullen en tegel gifs als ze een gradiënt als achtergrond wilden, maar dat is ook niet langer nodig, tenzij je wilt feesten alsof het 1999 is. Tegenwoordig wil je CSS3 lineair verloop en radiaal-gradiënt Eigenschappen, waarvoor u aanwijzingen en kleurstops definieert.

Hier is een CSS-regel met een basisgradiënt:

 H1 {
 Achtergrond: lineaire verloop (naar rechts, RGBA (255,255,255,1), RGBA (255,255,255,0));
}

Dit zou worden toegepast op niveau-één rubrieken, waardoor ze een lineair verloop hebben dat van links naar rechts gaat, te beginnen met massief wit en eindigend in transparant wit.

Met behulp van hoeken en meervoudige kleurstops kunt u veel verder gaan, veel verder met verlopen. Experimenteren, probeer een Photoshop-achtig te gebruiken CSS-gradiëntgenerator en het onderzoeken van de code-uitvoer (Mindful is het gekoppelde voorbeeld voegt syntaxis toe voor oudere browsers - Gewoon het lineair verloop lijn voor uw eigen gebruik).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — Zoals de CSS-patronen Galerie laat zien, kun je echt dingen doen met CSS-hellingen

Als je het leuk vindt om uit te zoeken wat gekruide webprofessionals kunnen doen met verlopen en achtergrondgrootte , bekijk Lea Verou's CSS3 patronen galerij Daar vind je tal van live-voorbeelden die CSS-hellingen gebruiken om allerlei serieuze indrukwekkende achtergrondpatronen te creëren.

En ja, er is een vleugje waar we in kwamen met betrekking tot oogballen in sommige van hen.Maar zoals bij alles als het gaat om webachtergronden, is de sleutel om ervoor te zorgen wat u toevoegt, is relevant in de context van uw ontwerp en - het belangrijkste - dat achtergronden niet afleiden van inhoud, of het onleesbaar maken.

Gerelateerde Links:

Een gids voor het schrijven van betere CSS
Maak een responsieve lay-out met CSS-raster
CSS-trucs om uw lay-outs te revolutioneren

Hoe leuke CSS-achtergronden toevoegen aan uw sites

Voeg CSS-achtergronden toe aan webpagina-elementen

De grootte van achtergrondafbeeldingen wijzigen

Gebruik High-Res Retina Achtergrondafbeeldingen

Werk met alfakanalen en verlopen

Procedures - Meest populaire artikelen

Hoe een canvas uit te rekken en op te zetten voor olieverf

Webmeldingen uitschakelen voor Windows, MacOS en Android

Hoe een progressieve web-app te bouwen

Creëer aantal specifieke CSS-stijlen en lay-outs

4 stappen om beter VDM met Zbrush

Verf zoals een impressionist

Maak een drukke stadsscène in Illustrator

Hoe te tekenen Harley Quinn

Categorieën