Header Ads

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.

22 comments:

  1. Tack skall testa på min testblogg.

    ReplyDelete
  2. Hur gör man när man har TRE kolumner då??!

    ReplyDelete
  3. måste man lägga upp bilden på photobucket ?

    ReplyDelete
  4. Det är lite klurigt för min del också...och som sagt..måste bilderna komma från photobucket?

    ReplyDelete
  5. För er som inte fått det att fungera!
    Jag har nu redigerat inlägget, lagt till en bättre kod och förklarat problemet med stora bilder. Förhoppningsvis ska det fungera bättre nu!
    anneli

    ReplyDelete
  6. Jag kan inte heller få bakgrunden.. :/ händer ingenting när jag klistrar in koden

    ReplyDelete
  7. Beejbii!
    Jag bytte till din bloggmall (lefty stretch) på min testblogg och la in första koden med min egen bildadress och det funkade. Vilken av koderna använde du?

    Jag hälsar på dig på din blogg och så ser vi om vi kan lösa problemet!

    ReplyDelete
  8. God förmiddag,

    Jag undrar hur man lägger in en bild i inläggstiteln som man ser på bilderna i den här tutorialen på en liten hund eller katt eller vad du har där? ;)Tack på förhand!

    Emmeli

    ReplyDelete
  9. Tack! :)
    Blev inte riktigt som jag ville ha det, men det blev fint ändå! :) hehe..

    ReplyDelete
  10. Jag har tre kolumner nu efter mycket testande, och det är jag glad för. Därför undrar jag hur jag får till det på den vänstra kolumnen, där blir det ingen färg. Måste ju säkert in någon mer stans och lägg till en kod.

    ReplyDelete
  11. Hittade själv var jag ändrar på den vänstra-kul!
    Men bara för det så "halkade" en bild på den högra spalten ner en bit. Får ju troligen inte plats......förslag?

    ReplyDelete
  12. Tack så mycket för detta och tack för hela sidan för övrigt! Fantastiskt bra hjälp för en som inte kan så mycket om sånt här :-)

    //Micke

    ReplyDelete
  13. Det funkade efter lite trixande! Det räckte inte att ändra "outer wrapper" för att få textbakgrunden vit, jag fick ändra på "header-", "main-" och "sidebar-" också. Ett problem återstår - headerbilden är inte centrerad... kan inte se i scriptet vad som är fel.

    /Eva

    PS Tack för mycket instruktiva vägledningar, jag har ändrat textbredden tidigare och lägger nu in bilder via Photobucket för att få dem stora!

    ReplyDelete
  14. Stort tack för din underbara blogg!

    ReplyDelete
  15. Har testat allt detta som står men inget av det funkar... =/ Vet inte vad jag gör för fel.

    Tack ändå!

    ReplyDelete
  16. Var hittar jag egentligen bilder som jag får lov att använda. Hade tänkt mig en ganska enkel ljus bakgrund. Hittar jag bara det så ska jag nog lösa ut det. Det är ju en riktigt bra beskrivning!

    ReplyDelete
  17. Hittade bild, men fixar inte det riktigt. Får in bilden bakom. Men sen försvinner den när jag ska redigera det andra, alt. vitt på vissa ställen, andra inte. Har tre kolumn, är det fler koder då?

    /Tacksam

    ReplyDelete

-------------------------------
Lämna gärna en hälsning! Har du en bloggfråga är du välkommen att ställa den på vårt forum. På så vis kan fler svara alternativt få hjälp om de har samma problem. Tack!
Du hittar en länk till forumet högst upp till vänster här på Fixabloggen.
-------------------------------