Hur man skapar en bakgrund till 2 kolumner

Jag får ibland en förfrågan hur jag gör mina bakgrunder, och tänkte att jag ska försöka visa så enkelt som möjligt. Först måste du ha någon typ av bildbehandlingsprogram, finns en del på nätet att välja på, om du inte har ett.
Först skapar du en bakgrund med måttet 1600 gånger 1200 pixlar.


Sedan ett nytt lager för mittdelen på bloggen, den del där texten rullar.
Med måttet 750 gånger 1200 pixlar


När mittdelen är gjord sätter du den precis mitt på bakgrunden.


Sedan kan du bygga på med de bilder du vill använda som dekoration.


Sedan är det bara att göra en snygg header som matchar bakgrunden,
att de passar ihop gör mycket för helhetsintrycket.
En header som passar blogger är 648 pixlar bred, hur hög du vill att den ska vara är valfritt. Headern görs fristående och läggs ej in i bakgrunden. Den lägger man in i bloggen i layouten.

Tänk på att spara bakgrunden i ett lager, och i 100 % förstoring.

Sedan behöver du veta din bakgrunds direct link, som man får genom att lägga in din bakgrund i ett vanligt inlägg på din blogg. Klicka på bilden så den visas i förstoring, högerklicka på bilden och gå in på egenskaper. Där hittar du din bilds direct link under adress (url).
Eller också kan du lägga in din bakgrundsbild på Photobucket och få din direct link där.

Använd koden nedan och sätt in din bilds direct link där det är markerat:

<style type="text/css">body {background-image: url("DIN BILDS DIRECT LINK") ;background-position:center;background-repeat:no-repeat;background-attachment:fixed;}</style>


Hoppas jag har lyckats förklara så det är lätt att förstå......


post signature

15 comments:

Michelin said...

Tycker du är jätte bra att förklara, det är enkelt att följa och jag har gjort flera olika bakgrunder, men sen tar det tvärstopp när jag väl ska lägga in koden på min blogg. Frågan är vart ska jag lägga koden?
Och att lämna ut mitt lösenord till min blogg vet jag inte om jag vill göra på Photobucket.
Jag fortsätter att exprimenterar!
//Michelin//

Busan said...

Michelin här igen.. Funderar på varför jag kan lägga in bakgrunden på en blogg som jag bara håller på och testar och leker med.. Men jag kan inte få in den bakgrunden på min ordinarie blogg. Vet inte varför det är så. Förstår du?
//Michelin// men nu skriver jag från min test-sida så du kan se hur jag skulle vilja ha den på min ordinarie blogg, men jag vill inte ändra på utseendet för övrigt där, jag menar spalterna osv..

Atelje Linnea said...

Hej
Jag ser inte adressen till din testsida i ditt inlägg, men kan det vara så att du har en bakgrund på 3 kolumner i din blogg och mallen jag har visat ovan är för 2 kolumner. Du får öka mittdelens mått(bredden) för bakgrunder med 3 kolumner.
:)Linnea

Busan said...

Jag förstår vad du menar men jag förstår inte hur jag öka mittdelens mått för bakgrunder med 3 kolumner. Det är absolut det som är felet, men se jag och försöka förstå.... ja jag ska göra nya försök. I never give up...
http://vitva.blogspot.com/
Sidan: bibbelubban är en test från ett program som man får testa å göra en sida, och det är väl igentligen grunden som jag vill ha på min Michelin-blogg, men ändå ha kvar alla mina vita o ljusa färger som jag har nu idag...
http://bibbelubban.blogspot.com/

//Michelin//

Atelje Linnea said...

Pröva med att göra en mittdel som har måtten 900 gånger 1200 pixlar, kan hända att du får justera något för att få den att passa, men jag tror att det kan stämma rätt bra.
Linnea

//Jompa said...

Hej!
Jättebra att det är någon som förklarar på ett vettigt sätt. :) Jag har gjort efter dina anvisningar, men när jag skall lägga in i min blog aliasjompa.blogspot.com så blir det bara en liten ruta bakom, inte alls som när jag provar en annan (tex en av dina på 2 kolumner). då funkar det hur bra som hellst, men inte när jag gör dom..vad gör jag för fel då?
Mvh Jenny

Atelje Linnea said...

Hej Jompa
Det är viktigt att få med allt i hela koden, så inte något har fallit bort, och att bildens direct link ligger emellan dessa små markeringar: " "
En direct link börjar alltid med http://....

Och så måste man ta bildens direct link när bilden är förstorad i 100 %.

Hoppas detta var till någon hjälp,
:) Linnea

//Jompa said...

Hej igen!

Jag har kollat allt noga och jag får fortfarande inte till det.

Hur menar du med att bilden måste vara förstorad i 100% ?? Kanske jag gör något fel där? (kanske är lite trög i överkant nu haha)

Hoppas du kan svara på detta oxå! :)

Atelje Linnea said...

Jag tror att det kan vara att du har sparat din bakgrundsbild i ett för litet format.
Först lägger du in din bild på din blogg tex eller en testblogg och sparar det inlägget. Tänk på att du väljer spara bild som stor.

När du gjort det klickar du på din bild i inlägget, så bilden visas förstorad.
Det är det jag menar med 100 %.

Hoppas det fixar sig nu
Linnea

//Jompa said...

Hej igen!

Ja nu har jag lyckats, fick experimentera lite med storleken (funkade ej med 1600 bred) men nu har jag fått till det iaf. :)
Tack så jättemycket för hjälpen!

Förresten; Måste bara säga att jag gillar din sida! Den är mkt fin. :)

Mvh Jenny

Atelje Linnea said...

Grattis!!
Vad kul att det funkade.
Det här med bredden 1600 pixlar, beror på hur stor skärm du har.
Har man en stor skärm, behöver man öka bredden, för att inte få tomrum på sidorna av bilden.
:) Linnea

mimmi said...

Hej :) jag vet att detta är läge sedan men jag vill tala om att jag nu har gjort en egen design till min blogg .. tack vara din beskrivning här :) så tusen tack :)

Linneas Atelje said...

Hej!!
Vad kul att det gick bra!!
:) Linnea

Nettan said...

Hejsan!
Nu har jag gjort en bakgrund till min blogg, men den blev för stor. Vad har jag gjort för fel.
Kolla här får du se.
www.familjen-nyberg.blogspot.com

Linneas Atelje said...

Hej Nettan
Vilken fin bakgrund du har gjort.
Du har gjort rätt, men du har lagt dina bilder på rad över hela bildytan. Gör dem mindre och centrera dem till mitten av din bild, som du har gjort.
Titta på exempelbilderna ovan, hur den oranga blomman ligger (mitt på).
Hoppas det blir bra
:) Häls. Linnea