Hur du lägger till en egen bakgrund

Om du har någon av bloggers grundmallar kan det kanske kännas lite tomt och trist i bloggen ibland. Vilken tur då att det går att göra något åt det - och på ett enkelt vis också!

I den här tutorialen utgår jag från Bloggers grundmall Minima, om du har en annan mall kan man ev. behöva göra mindre justeringar för att få allt att fungera som det ska.

Om man ska lägga till en egen bakgrund på sin blogg är det ett par saker man behöver fundera över först.
Vill du ha ett mönster som upprepar sig, som fyller ut bakgrunden likt en tapet?
Eller, vill du hellre ha en bild eller ett fotografi som kikar fram bakom din bloggtext?
Vill du ha en bakgrund som rullar med när man scrollar texten eller passar det bättre med en bild som ligger stilla, som är fixerad?

Jag skulle rekommendera att du har en bakgrund som följer med bloggens text om du har ett mönster som fyller utan synliga skarvar, medan ett fotografi ser bäst ut som en fixerad bakgrund. Tydliga kanter stör ögat och ser trist ut.

Om du bestämmer dig för att använda en fixerad bild bör storleken på bilden ligga omkring 1500x1000 pixlar. Då fyller den de flesta datorskärmar, utan att det blir en kant runt din bild, men - de som har en liten skärm kanske inte ser de yttersta delarna på din bild. Det är en avvägningsfråga, vad man anser viktigt.

Ett problem som man stöter på då man ska ladda upp sin bild när den är klar är att hitta en webhost (bilduppladdningssida) som tar dina stora bilder och inte förminskar dem. Själv valde jag att gå över från Photobucket (max 1024x768 pixlar) till Photobucket Pro (2240x1680 pixlar) eftersom jag ofta har behovet av stora bilder då jag bloggdesignar, men det kan kännas onödigt att betala en avgift för att få visa en enda bakgrund.

De sidor jag kan rekommendera i dagsläget är därför :

Fileden - en filuppladdningssida där varje fil får vara upp till 50 mb stor.

Tinypic - där får din bild vara upp till 1600 pixlar bred/hög.

Imageshack - där har du en maxstorlek på bilden, 1,5 mb, men ingen pixelrestriktion.
(du kan alltså sänka upplösningen på din bild för att få den att täcka en större yta på skärmen. Internet är ganska snällt mot lågupplösta bilder jämfört med då du skriver ut dem, prova får du se! Antagligen ser du ingen skillnad på 300ppi och 72 ppi. Undrar du vad ppi är, läs här )


Börja alltså med att ladda upp din bakgrundsbild så att din bild får en webadress.

Därefter går du in på din bloggs Layout - Redigera HTML.
Scrolla ner tills du kommer till Body.
Kopiera följande kod och klistra in den under background: bgcolor;

background-image: url(http://DIN BILDADRESS);
background-position: center;
background-repeat:no-repeat;
background-attachment: fixed;

om din bild ska vara stilla, alltså fixerad.

Om du istället vill att din bild ska följa med texten uppåt och inte repetera sig då man scrollat förbi nederkanten på bilden använder du följande kod:

background-image: url(http://DIN BILDADRESS);
background-position: top;
background-repeat: no-repeat;
background-attachment: no-repeat;

Eller följande kod om du har ett mönster du vill upprepa:

background-image: url(http://DIN BILDADRESS);
background-attachment: repeat;

(obs, den översta koden är redigerad i efterhand, så den stämmer inte helt med bilden nedan, men placeringen är densamma ändå i din kodmall. 20/7-09)

Byt ut DIN BILDADRESS mot din bilds direklänk. Se till att det bara blir ett http:// och att inga ( ) tecken försvinner.

När du nu förhandsgranskar din blogg bör du se din bakgrund på plats -likt nedanstående bild- om du har Minimas bloggmall. Vissa andra mallar har färgade wrappers under sin text och då kanske du får redigera färgerna på dessa så att de matchar din bakgrund. Minima har det inte och det ska vi åtgärda härnäst.

Det ser ju lite trist ut, för att inte tala om svårläst och så vill du ju kanske inte ha det.
Om du vill åtgärda det här har du nu ännu ett val att göra. Vill du ha en hel bakgrund under din text, sidebar och header (som den nedersta bilden i denna bloggpost) eller vill du ha varje wrapper för sig (som i den översta bilden i bloggposten)?

Om du vill ha en hel textbakgrund ska du ändra koden i din Outer Wrapper.
Om du vill ha en delad textbakgrund ska du ändra koden i Header Wrapper + Main Wrapper + Sidebar Wrapper.

För en hel textbakgrund:
Gå in på din bloggs Layout- Redigera HTML igen.
Scrolla ner till Outer wrapper
Lägg in följande kod

padding: 7px;
background-color:#ffffff;

under width, så här:

#outer-wrapper {
width: 660px;
padding: 7px;
background-color:#ffffff;

Förhandsgranska och om det ser bra ut- spara.

Om du däremot vill ha varje kolumn för sig gör du så här:

Återigen, gå in på din bloggs Layout - Redigera HTML.
Scrolla ner till Header Wrapper
Lägg in följande kod under Width:

background-color:#ffffff;

Så här:

#header-wrapper {
width:660px;
background-color:#ffffff;

Scrolla sen ner till Main Wrapper
Lägg in följande kod under Width:

padding: 7px;
background-color:#ffffff;

Så här:

#main-wrapper {
width: 410px;
padding: 7px;
background-color:#ffffff;

Scrolla så sist ner till Sidebar Wrapper
Lägg in följande kod under Width:

padding: 7px;
background-color:#ffffff;

så här:

#sidebar-wrapper {
width: 220px;
padding: 7px;
background-color:#ffffff;

Förhandsgranska och spara om du är nöjd.