background - CSS

Lidt om at bestemme udseendet på baggrunden af elementer på en hjemmeside med CSS

Introduktion

Her vil jeg prøve og forklare hvordan man ændre baggrunden på elementer med CSS.

Seamless baggrundsbillede

Hvis man ønsker at have et billede lagt ud som fliser på baggrunden man kan søger efter "seamless" billeder som er billederne der er egnet til at blive lagt som fliser ved siden af hinanden og kanterne passer sammen så det bliver flot.

Her ses et "seamless" billede som egner sig som fliselagt baggrundsbillede.
seamless billede til fliselægning
FLISELAGT SEAMLESS BAGGRUNDSBILLEDE DEMO

Strukket baggrundsbillede

Her er en demo hvor baggrundsbilledet automatisk fylder 100% af browseren i både bredde og højde.
animerede blæser
STRUKKET BAGGRUNDSBILLEDE DEMO

Flere baggrund

I CSS3 kan man bruge flere baggrunde på samme element.
Baggrundene adskilles med komma.
Baggrundene ligges i lag oven på hinanden, den først baggrund er øverst.

FLERE BAGGRUNDSBILLEDER DEMO

Background property

Resultatet ovenfor er skabt af følgende kode

background-attachment: local; virker fra Firefox 25.0.
This keyword means that the background image will not scroll with its containing element, but will scroll when the element's content scrolls: it is fixed regarding the element's content.

The background is fixed with regard to the element's contents: if the element has a scrolling mechanism, the background scrolls with the element's contents. In this case, the background behind the element's border (if any) scrolls as well, even though the border itself does not scroll with the contents. The UA may, however, treat the ‘border-box’ value of ‘background-clip’ as ‘padding-box’ in cases where ‘background-attachment’ is ‘local’ and the contents of the element scroll.
Siden er sidst opdateret mandag 25. juni 2018