Indsæt Baggrundsbillede eller Baggrundsfarve med CSS

Hvordan man indsætter baggrundsbilleder og baggrundsfarver med CSS.

2174 visninger

Edited: 2017-12-05 00:09

For at indsætte et baggrundsbillede eller en baggrundsfarve med CSS kan man benytte background egenskaben. Der findes dog også egenskaber, som mere specifikt bliver brugt til at indsætte et billede eller farve, det er eksempelvis background-image og background-color.

I begyndelsen kan det godt være, at mange vil synes at sidstnævnte er nemmest at lære, men når man begynder at blive bedre til CSS, så handler det meget mere om, at spare plads i koden, og skrive sin kode hurtigere. Til det er background egenskaben bedst egnet, og derfor kan man med fordel vælge, udelukkende at benytte denne fra starten.

Sådan bruger man CSS background til at indsætte både baggrunds billede og farve i samme deklaration:

#element_id {
  background: red url("/baggrunde/eksempel.jpg") no-repeat top left;
}

Ovenstående vil placere et baggrundsbillede til venstre, i toppen af elementet. Billedet har "no-repeat", hvilket betyder, at det ikke skal gentages for at udfylde resterende plads.

Man kan også vælge kun at angive en farve:

#element_id { background: red; }

Eller hvis man kun vil angive et billede:

#element_id {
  background: url("/baggrunde/eksempel.jpg") no-repeat top left;
}

Hvis man ønsker, at billedet skal gentage sig, så kan man bruge repeat i stedet for no-repeat.

Tilpasning af baggrundsbilleder

Som standard vil et baggrundsbillede kun optage den plads, som billedet fylder i elementet. Det betyder, hvis et billede er 400px bredt, og elementet er bredere end de 400px, så vil den resterende plads enten blive fyldt med baggrundsfarven, eller den vil være gennemsigtig.

Hvis man vil have en baggrund til at opføre anderledes, kan man bruge background-size, hvilket, blandt andet, gør det muligt, at få en baggrund til at optage alt pladsen i en boks.

#element_id {
  background: url("/baggrunde/eksempel.jpg") no-repeat top left;
  background-size:100% 100%;
}

Dette kan dog betyde, at højde og bredde forholdene ikke længere passer på billedet. Det kan i øvrigt også have den bivirkning, at et billede vil blive meget uskarpt. Hvis man vil have et billede skal bevare skarphed, uanset skærmopløsning, kan man med fordel anvende .svg (vector) filer i stedet for .png, .gif, .jpg (raster).

En anden mulig indstilling for background-size er contain. Bruger man denne indstilling vil billedet automatisk blive tilpasset boksen, sådan at hele billedet er synligt. Her vil højde og bredde forhold blive bevaret.

Endeligt har vi også cover indstillingen, den vil dog både ændre størrelse- og skære i baggrunden, for at få den til at passe til boksen.

Bruger man en procent-værdi angiver man højden og bredden for baggrundsbillede. En angivelse på 50% vil svare til halvdelen af størrelsen (højden eller bredden) på den boks baggrunden tilhøre.

Background-image og background color

Hvis man synes background egenskaben er svær at forstå, så kan det muligvis hjælpe, at starte med background-image og background-color egenskaberne.

Den første bliver brugt til at tilføje et billede. Der er en række af ekstra egenskaber, som bliver brugt sammen med background-image. De vigtigste er nok background-position og background-repeat. Deres funktion er den samme, som vist i background eksemplerne. background-position vil eksempelvis tage en værdi af top right, og background-repeat kan tage no-repeat eller repeat.

#element_id {
  background: url("/baggrunde/eksempel.jpg");
  background-repeat: no-repeat;
  background-position: top right;
}

Det er simpelthen bare en længere og mere besværlig måde at kode det på. Uanset hvilken metode du vælger, så er det muligt at angive både baggrundsfarve og baggrundsbillede samtidig.

Tilpasning af baggrundsbilleder

Background-image og background color

Fortæl os hvad du tænker: