CSS bakgrund

CSS tillåter användning av ren färg som bakgrund och tillåter också användning av bakgrundsbilder för att skapa ganska komplexa effekter.

CSS har mycket större förmåga i detta än HTML.

bakgrundsfärg

Du kan använda background-color-egenskapenStäll in bakgrundsfärg för element. Denna egenskap accepterar alla giltiga färgvärden.

Denna regel sätter elementets bakgrund till grå:

p {background-color: gray;}

Om du vill att bakgrundsfärgen ska sträcka sig lite från texten inom elementet, lägg till lite innermarginal:

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

Try it yourself

Du kan ställa in bakgrundsfärg för alla element, inklusive body och inliningskomponenter som em och a.

background-color kan inte ärva, dess standardvärde är transparent. Transparent betyder 'genomskinlig'. Detta innebär att om ett element inte har specificerat en bakgrundsfärg, är bakgrunden genomskinlig, så att bakgrunden på dess anförsel kan synas.

bakgrundsbild

För att lägga till en bild i bakgrunden behöver du använda Propertyn background-image.Standardvärdet för propertyn background-image är none, vilket innebär att det inte finns någon bild på bakgrunden.

Om du behöver sätta en bakgrundsbild måste du tilldela en URL-värde till denna egenskap:

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

De flesta bakgrunder tillämpas på body-elementet, men det är inte begränsat till detta.

Nedan är ett exempel som applicerar en bakgrund till en paragraf utan att applicera bakgrund till övriga delar av dokumentet:

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

Du kan till och med sätta en bakgrundsbild för inline-element. Följande exempel visar hur en länk får en bakgrundsbild:

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

Try it yourself

Teoretiskt kan man till och med applicera bakgrundsbilder på substituentelement som textareas och select, men inte alla användningsagenter hanterar detta bra.

Det är också värt att tillägga att background-image inte kan ärva. Faktum är att alla bakgrundsegenskaper inte kan ärva.

Bakgrundsupprepning

Om du behöver täcka bakgrundsbilden med ett mönster på sidan kan du använda Propertyn background-repeat.

Värdet repeat leder till att bilden täcker både horisontellt och vertikalt, som vanligt för bakgrundsbilder. repeat-x och repeat-y leder till att bilden endast upprepas horisontellt eller vertikalt, medan no-repeat inte tillåter att bilden täcker någon riktning.

Som standard kommer bakgrundsbilden att börja från en elements övre vänstra hörn. Se på följande exempel:

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

Try it yourself

Bakgrundsposition

Man kan använda Propertyn background-positionÄndra platsen för bilden i bakgrunden.

Nedan är ett exempel som centrerar en bakgrundsbild i body-elementet:

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

Det finns många sätt att tilldela värden till propertyn background-position. Först och främst kan du använda vissa nyckelord: top, bottom, left, right och center. Vanligtvis uppstår dessa nyckelord i par, men det behöver inte alltid vara så. Du kan också använda längdvärden, som 100px eller 5cm, och slutligen kan du använda procentvärden. Olika typer av värden påverkar placeringen av bakgrundsbilden något olika.

Nyckelord

Bildenplaceringens nyckelord är lättast att förstå, och fungerar som deras namn indikerar. Till exempel placeras bilden med top right i elementets högra övre kant av inre kantlinje.

Enligt specifikationen kan positionsnamn uppstå i vilken ordning som helst, förutsatt att det inte används mer än två nyckelord - ett för horisontell riktning och ett för vertikal riktning.

Om endast en nyckelord används, antas den andra nyckelordet vara center.

Så om du vill ha en bild mitt i varje stycke, behöver du bara deklarera som följer:

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

Här är ekvivalenta positionsnamn:

Enkel nyckelord Ekvivalenta nyckelord
mittpunkt mittpunkt mitt
övre övre mitt eller mitt övre
nedre nedre mitt eller mitt nedre
höger höger mitt eller mitt höger
vänster vänster mitt eller mitt vänster

Procentvärden

Procentvärdena är mer komplexa. Om du vill centrera bilden i elementet med procentvärden är det enkelt:

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

Detta leder till att bilden placeras korrekt, med sin mittpunkt centrerad mot elementets mittpunkt.Detta innebär att procentvärdena tillämpas både på elementet och bilden.Detta innebär att punkten som beskrivs som 50% 50% i bilden (centrum) och punkten som beskrivs som 50% 50% i elementet (centrum) är centrerade.

Om bilden ligger på 0% 0%, placeras dess vänstra övre hörn på elementets vänstra övre kant av inre kantlinje. Om bildens position är 100% 100%, placeras bilden på elementets högra nedre kant av höger kantlinje.

Så om du vill placera en bild på 2/3 horisontellt och 1/3 vertikalt, kan du uttrycka det på detta sätt:

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

Om endast en procentvärde erbjuds, används detta värde som horisontell värde, och vertikell värde antas vara 50%. Detta är liknande för en nyckelord.

Bakgrundens standardposition är 0% 0%, vilket fungerar som top left. Detta förklarar varför bakgrundsbilden alltid täcker från elementets vänstra övre kant av inre kantlinje, om inte annan position är satt.

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 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. 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 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 the image as background
This example demonstrates how to set the image as a background.
Set the 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
Detta exempel visar hur man använder kortformade egenskaper för att sätta alla bakgrundsegenskaper i en enda deklaration.

CSS bakgrundsegenskaper

Egenskap Beskrivning
background Kortformad egenskap som sätter bakgrundsegenskaperna i en enda deklaration.
background-attachment Om bakgrundsbilden ska vara fast eller rulla med resten av sidan.
background-color Ställ in elementets bakgrundsfärg.
background-image Sätt bilden som bakgrund.
background-position Ställ in bakgrundsbildens startposition.
background-repeat Ställ in om bakgrundsbilden ska upprepas och hur.