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

Baggrundsbillede nederst på siden

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.

Skriv din kommentar

Spørg mig om hvad som helst
Du kan også skrive direkte til mig på
Stem
Søg
Language

Select English to navigate the website in English. Things like the navigation menu and contact form will be in English, but the main content on each page will not be translated.