CSS baggrund

CSS tillader anvendelse af ren farve som baggrund, og det er også muligt at bruge baggrundsbilleder til at skabe ganske komplekse effekter.

CSS har langt større evner i dette område end HTML.

Baggrundsfarve

Man kan bruge background-color egenskabIndstil baggrundsfarve for elementet. Denne egenskab accepterer alle gyldige farveværdier.

Dette regelsæt sætter elementets baggrund til grå:

p {background-color: gray;}

Hvis du ønsker, at baggrundsfarven kun lidt udvider sig uden for teksten i elementet, skal du tilføje lidt indre kant:

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

Try it yourself

Baggrundsfarve kan indstilles for alle elementer, herunder body og inline-elementer som em og a.

background-color kan ikke arves, dens standardværdi er transparent. Transparent betyder 'gennemsigtig'. Det vil sige, hvis et element ikke specificerer en baggrundsfarve, er baggrunden gennemsigtig, så baggrunden på dens forældre-elementer kan ses.

Baggrundsbillede

For at placere et billede i baggrunden, skal du bruge background-image-ejerskabet.background-image-ejerskabets standardværdi er none, hvilket betyder, at der ikke er nogen billedet placeret på baggrunden.

Hvis du har brug for at sætte et baggrundsbillede, skal du angive en URL-værdi til dette attribut:

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

De fleste baggrunde anvendes til body-elementet, men det behøver ikke at være tilfældet.

Dette eksempel viser, hvordan man anvender en baggrund til en afsnit, uden at anvende baggrund til andre dele af dokumentet:

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

Man kan endda sætte baggrundsbillede til inline-elementer. Dette eksempel viser, hvordan man sætter et baggrundsbillede til en link:

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

Try it yourself

Teoretisk set kan man endda anvende billeder som baggrund til tekstområder og select-elementer, men ikke alle brugere kan håndtere dette godt.

Desuden skal det bemærkes, at background-image ikke kan arves. Faktisk kan ingen af baggrundsegenskaberne arves.

Baggrundsgentagelse

Hvis du har brug for at tætte baggrundsbilledet på siden, kan du bruge background-repeat-ejerskabet.

Værdien repeat får billedet til at gentage sig både horisontalt og vertikalt, som er det sædvanlige for baggrundsbilleder. repeat-x og repeat-y får billedet til kun at gentage sig enten horisontalt eller vertikalt, mens no-repeat ikke tillader, at billedet gentager sig i nogen retning.

Standardmæssigt vil baggrundsbilledet starte fra øverste venstre hjørne af et element. Se på dette eksempel:

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

Try it yourself

Baggrundsposition

Man kan bruge background-position-ejerskabetÆndre billedets placering i baggrunden.

Her er et eksempel på, hvordan du kan centrere et baggrundsbillede i body-elementet:

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

Der er mange måder at angive værdier til background-position-ejerskabet på. Først og fremmest kan du bruge nogle nøgleord: top, bottom, left, right og center. Normalt optræder disse nøgleord i par, men det behøver ikke at være tilfældet. Du kan også bruge længdeværdier, såsom 100px eller 5cm, og sidst men ikke mindst kan du bruge procenter. Forskellige typer værdier har lidt forskellige effekter på placeringen af baggrundsbilledet.

Keywords

Image placement keywords are the easiest to understand, as their function is as indicated by their name. For example, top right places the image at the top right corner of the element's padding area.

According to the specification, position keywords can appear in any order, as long as they do not exceed two keywords - one corresponding to the horizontal direction and the other corresponding to the vertical direction.

If only one keyword is present, the other keyword is considered to be center.

So, if you want an image to appear in the middle of each paragraph, just declare as follows:

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

Here are the equivalent position keywords:

single keyword equivalent keywords
center center center
top top center or center top
bottom bottom center or center bottom
right right center or center right
left left center or center left

Percentage values

The representation of percentage values is more complex. Suppose you want to use percentage values to center an image within its element, it's easy:

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

This will result in the image being properly positioned, with its center aligned with the center of the element.In other words, the percentage values are applied to both the element and the image.That is to say, the point described as 50% 50% in the image (the center point) aligns with the point described as 50% 50% in the element (the center point).

If the image is at 0% 0%, its top left corner will be placed at the top left corner of the element's padding area. If the image position is 100% 100%, it will place the bottom right corner of the image at the bottom right corner of the right margin.

Therefore, if you want to place an image at 2/3 horizontally and 1/3 vertically, you can declare it like this:

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

If only a percentage value is provided, this value will be used as the horizontal value, and the vertical value will be assumed to be 50%. This is similar to the keyword.

background-position's standard value is 0% 0%, which is functionally equivalent to top left. This explains why the background image is always tiled from the top left corner of the element's padding area, unless you set a different position value.

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 just 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. When the document scrolls past the position of the image, the image will disappear.

You can use background-attachment propertyPrevent this scrolling. Through 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 by default, 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
This example shows how to set the background color of part of the text.
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 properties in one declaration
Dette eksempel viser, hvordan man bruger kortformet egenskab til at sætte alle baggrundsegenskaber i én erklæring.

CSS baggrundsegenskab

Egenskab Beskrivelse
background Kortformet egenskab, der bruges til at sætte baggrundsegenskaberne i én erklæring.
background-attachment Om baggrundsbilledet er fast eller ruller med resten af siden.
background-color Indstil elementets baggrundsfarve.
background-image Sæt billedet som baggrund.
background-position Indstil baggrundsbilledets startposition.
background-repeat Indstil om baggrundsbilledet skal gentages og hvordan.