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 }.

Tescho

Jag föredrar att skriva i ljus - att uttrycka mig med hjälp av en kamera. När jag inte fotograferar på uppdrag av mig själv tar jag emot bokningar som fotograf via Formrikt. I och med att jag har en kärlek för DIY och formgivning kan det också komma att ta plats här på bloggen.

Du kanske också gillar

8 kommentarer

  • Linda - She with the colors
    10 augusti, 2009 at 22:00

    SV; Tack! Nu ska detta komma till nytta! :D

    Skulle du kanske kunna visa hur man gör klickbara bilder så att de sitter på headern? ^^

    Svar från Tescho: Jag har valt att göra en gratis bloggdesign med just den funktionen. Men i framtiden kommer jag troligtvis göra en guide om det :) (antecknar på att-göra-listan).

  • Gabriella ›
    22 januari, 2011 at 18:26

    Tack för hjälpen!
    Hjälpte mig med min design. Din blogg äger!

  • Therese Gustavsson
    5 april, 2014 at 23:28

    Hej!
    Behöver verkligen hjälp med min bakgrund. Har hittat en som jag verkligen vill ha men frågan är hur jag ska göra för att själva färgen ska fortsätta längst ner på bloggen. Har nämligen ett mönster högst upp som jag dess värre inte vill ska upprepas längst med hela bloggen. Vore så tacksam för hjälp! Har provat massa sätt men inget fungerar som jag vill :/ Går det att fixa på något sätt? :)

    Mvh Therese Gustavsson (theresegustavsson.se)

LEAVE A COMMENT