Positionera bakgrundsbilden

Jag fick en förfrågan om hur man får en bakgrundsbild att sitta kvar längst upp (så att den inte följer med när du scrollar) och därför hade jag tänkt att gå igenom det och de andra alternativen.

Gratis bloggdesign nr 3 har en bakgrund som sitter kvar där uppe, oavsett hur man gör. Strecken som finns där åker alltså inte med när man scrollar ner. De åker bara åt sidan.. Då ser koden ut såhär i stilmallen:

Koden betyder att bakgrunds-bilden repeterar i x-led (dvs vågrätt) och börjar i vänstra hörnet. Om du ska ha en bakgrund längst upp som inte ska uppdateras på något sätt byter du ut ”repeat-x” till ”no-repeat”.

Förklarningar av olika koder:
Om bakgrunden ska repeteras på olika sätt:
Repeat-x = repeteras i x-led (vågrätt, dvs åt sidan)
Repeat-y = repeteras i y-led (lodrätt, dvs neråt)
No-repeat = repeteras inte, bara 1 gång

Positionering av bakgrunden:
Här kan du använda top, bottom, left, right och center. Några exempel nedan:
top left = bilden börjar i vänstra hörnet
center center = bilden ligger i mitten av allt – både i höjdled och sidled
bottom right = bilden börjar i högra botten

Om du vill att bakgrunden ska följa med när du scrollar:
Fixed = bilden följer med när du scrollar. Den koden kan du sätta in framför repeat-koden om du vill ha så. Om det krånglar kan du istället lägga in raden: ”background-attachment: fixed;” innan }.


Kommentarer ( 8 )

Kommentera