CSS Background

CSS staat toe om puur kleur als achtergrond toe te passen, evenals het gebruik van achtergrondafbeeldingen om redelijk complexe effecten te creëren.

CSS heeft in dit opzicht veel meer mogelijkheden dan HTML.

Achtergrondkleur

Je kunt gebruiken background-color-eigenschapStel een achtergrondkleur in voor het element. Deze eigenschap accepteert elke geldige kleurwaarde.

Deze regel stelt de achtergrond van het element in op grijs:

p {background-color: gray;}

Als je de achtergrondkleur van het tekst van het element naar buiten iets minder wilt laten uitsteken, voeg dan enkele binnenranden toe:

p {background-color: gray; padding: 20px;}

Try it yourself

Je kunt de achtergrondkleur instellen voor alle elementen, inclusief body tot en met inline-elementen zoals em en a.

background-color kan niet worden geërfd, de standaardwaarde is transparent. Transparent betekent 'transparant'. Dit betekent dat als een element geen achtergrondkleur heeft gespecificeerd, de achtergrond transparant is, zodat de achtergrond van de ouder-elementen zichtbaar blijft.

achtergrondafbeelding

Om een afbeelding in de achtergrond te plaatsen, moet je gebruiken background-image-eigenschap.De standaardwaarde van de background-image-eigenschap is none, wat betekent dat er geen afbeelding op de achtergrond wordt geplaatst.

Als je een achtergrondafbeelding wilt instellen, moet je een URL-waarde voor deze eigenschap instellen:

body {background-image: url(/i/eg_bg_04.gif);}

De meeste achtergronden worden toegepast op het body-element, hoewel dit niet beperkt is tot dit element.

Hier is een voorbeeld dat een achtergrond toepast op een paragraaf zonder de andere delen van het document een achtergrond toe te passen:

p.flower {background-image: url(/i/eg_bg_03.gif);}

Je kunt zelfs achtergrondafbeeldingen instellen voor inline-elementen. Het volgende voorbeeld stelt een achtergrondafbeelding in voor een link:

a.radio {background-image: url(/i/eg_bg_07.gif);}

Try it yourself

Theoretisch gesproken, kun je de achtergrondafbeelding van tekstgebieden en selecties en andere vervangende elementen toepassen, maar niet alle gebruikersagentschappen kunnen dit goed aan.

Daarnaast moet worden opgemerkt dat background-image ook niet geërfd kan worden. In feite kunnen alle achtergrondeigenschappen niet worden geërfd.

achtergrondherhaling

Als je de achtergrondafbeelding op de pagina wilt herhalen, kun je background-repeat-eigenschap.

De waarde repeat zorgt ervoor dat het beeld horizontaal en verticaal wordt gelegd, zoals gebruikelijk voor achtergrondafbeeldingen. repeat-x en repeat-y zorgen ervoor dat het beeld respectievelijk alleen horizontaal of verticaal wordt herhaald, en no-repeat laat het beeld niet in welke richting dan ook worden gelegd.

Standaard zal de achtergrondafbeelding beginnen bij de linkerkantbovenhoek van een element. Kijk naar het volgende voorbeeld:

body
  { 
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }

Try it yourself

achtergrondlocatie

Je kunt background-position-eigenschapVerander de positie van het beeld in de achtergrond.

Hier is een voorbeeld dat een achtergrondafbeelding in het body-element centreren:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:center;
  }

Er zijn veel manieren om waarden te bieden voor de background-position-eigenschap. Ten eerste, je kunt enkele trefwoorden gebruiken: top, bottom, left, right en center. Meestal verschijnen deze trefwoorden paarsgewijs, hoewel dit niet altijd het geval is. Je kunt ook lengtevelden gebruiken, zoals 100px of 5cm, en tenslotte ook procentwaarden. Verschillende soorten waarden verschillen iets in de plaatsing van de achtergrondafbeelding.

Kleuren

Kleuren voor beeldplaatsing zijn het meest begrijpelijk, hun functie is zoals hun naam aangeeft. Bijvoorbeeld, top right plaatst het beeld in de rechterbovenhoek van het binnenste margegebied van het element.

Volgens de specificatie kunnen positiekleuren in elke volgorde worden vermeld, zolang er niet meer dan twee sleutelwoorden zijn - één voor de horizontale richting en één voor de verticale richting.

Als er slechts één sleutelwoord wordt vermeld, wordt aangenomen dat het andere sleutelwoord center is.

Dus, als je een afbeelding in het middenboven van elke alinea wilt hebben, moet je het volgende verklaren:

p
  { 
    background-image:url('bgimg.gif');
    background-repeat:no-repeat;
    background-position:top;
  }

Hier zijn de equivalente positiekleuren:

Enkele sleutelwoorden Gelijke sleutelwoorden
center center center
top top center of center top
bottom bottom center of center bottom
right right center of center right
left left center of center left

Percentagewaarden

Het uiterlijk van percentagewaarden is complexer. Stel dat je de afbeelding in het element wilt centreren met percentagewaarden, dit is gemakkelijk:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50% 50%;
  }

Dit zorgt ervoor dat het beeld correct wordt geplaatst, met zijn midden uitgelijnd met het midden van het element.In andere woorden, percentagewaarden worden zowel op het element als op het beeld toegepast.Dus, het punt beschreven als 50% 50% in het beeld (het middenpunt) is uitgelijnd met het punt beschreven als 50% 50% in het element (het middenpunt).

Als de afbeelding zich op 0% 0% bevindt, wordt de linkerbovenhoek geplaatst op de linkerbovenhoek van het binnenste margegebied van het element. Als de positie van de afbeelding 100% 100% is, wordt de rechteronderhoek van de afbeelding geplaatst op de rechteronderhoek van de marges.

Dus, als je een afbeelding wilt plaatsen op 2/3 horizontaal, 1/3 verticaal, kun je het volgende verklaren:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:66% 33%;
  }

Als alleen een percentagewaarde wordt verstrekt, wordt deze waarde gebruikt als horizontale waarde, en de verticale waarde wordt aangenomen als 50%. Dit is vergelijkbaar met een sleutelwoord.

De standaardwaarde van background-position is 0% 0%, wat functioneel equivalent is aan top left. Dit verklaart waarom het achtergrondbeeld altijd van de linkerbovenhoek van het binnenste margegebied van het element begint te moffelen, tenzij u een andere positiewaarde instelt.

Length values

Length values explain the offset from the top-left corner of the padding area of the element. The offset point is the top-left corner of the image.

For example, if the value is set to 50px 100px, the top-left corner of the image will be 50 pixels to the right and 100 pixels down from the top-left corner of the padding area of the element:

body
  { 
    background-image:url('/i/eg_bg_03.gif');
    background-repeat:no-repeat;
    background-position:50px 100px;
  }

Note that this is different from percentage values, because the offset is only from one top-left corner to another top-left corner. That is, the top-left corner of the image aligns with the point specified in the background-position declaration.

Background Association

If the document is quite long, then when the document scrolls down, the background image will also scroll with it. When the document scrolls past the position of the image, the image will disappear.

You can do this by background-attachment propertyPrevent this scrolling. With this property, you can declare that the image is fixed relative to the visible area (fixed), so it is not affected by scrolling:

body 
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }

Try it yourself

The default value of the background-attachment property is scroll, which means that in the default case, the background will scroll with the document.

CSS Background Example

Set the background color
This example demonstrates how to set the background color for an element.
Set the background color of the text
How to set the background color of part of the text in this example.
Set image as background
This example demonstrates how to set an image as the background.
Set image as background 2
This example demonstrates how to set a background image for multiple elements at the same time.
How to repeat the background image
This example demonstrates how to repeat the background image.
How to repeat the background image vertically
This example demonstrates how to repeat the background image vertically.
How to repeat the background image horizontally
This example demonstrates how to repeat the background image horizontally.
How to display the background image only once
This example demonstrates how to display the background image only once.
How to place the background image
This example demonstrates how to place the background image on the page.
How to position the background image using %
This example demonstrates how to use percentages to position the background image on the page.
How to position the background image using pixels
This example demonstrates how to use pixels to position the background image on the page.
How to set a fixed background image
This example demonstrates how to set a fixed background image. The image does not scroll with the rest of the page.
All background attributes in one declaration
This example demonstrates how to use the abbreviated property to set all background properties in one declaration.

CSS Background Properties

Property Description
background Abbreviated property that sets the background properties in one declaration.
background-attachment Whether the background image is fixed or scrolls with the rest of the page.
background-color Set the background color of the element.
background-image Set the image as the background.
background-position Set the starting position of the background image.
background-repeat Set whether and how the background image is repeated.