Som ni kanske ser på bloggen så har den fått en fin bakgrund. Jag tycker att den ger en lite skönare känsla.
Hoppas att ni gillar det också
(Följande text förutsätter viss kunskap i html och css för att vara av behållning.)
Men sättet jag löste det på känns lite som ett mindre perfekt fulhack. Tanken var att bilden skulle vara bakgrund till allt, och själva main wrappern skulle vara vit-transparant. Temat har dock ingen sådan wrapper som gav padding runt texter. Så jag fick göra om bakgrundsbilden och lägga in ett vitt fält i mitten(Jag använde den utmärkta ”online-photoshop” tjänsten pixlr.com till detta). En inte helt ultimat lösning eftersom den knasar lite i mobilversionen, men det är nog inte någon som ser det och definitivt ingen som bryr sig (förutom jag).
En sak till som jag oroade mig var också att om någon använde en större skärm än mig, då skulle den personen se vita kanter runt bilden. Det finns lyckligtvis ett till litet hack till det också. I style.css sa jag till att bakgrundsbilden att vara 100% bred. Den skulle alltså, oavsett skärmstorlek/upplösning, fylla hela hela skärmen i sidled. (Den fyller dock inte i höjdled, så skulle du sitta på en monsterskärm så får du skylla dig själv). Du kan testa detta genom att hålla i Ctrl och sedan klicka på – eller +. För att få tillbaka till din vanliga storlek håller du ner Ctrl och klickar på 0.
För att få det som jag ville så skrev jag:
body{
background-image:url(http://ximon.se/wp-content/uploads/2013/02/bg_trans.jpg); Bilden jag använder
background-repeat:no-repeat; bilden ska inte repetera sig åt något håll
background-attachment:fixed; bilden ska hela tiden vara på samma ställe, även om jag scrollar neråt
background-position:center top; bilden ska vara positionerad längst upp i mitten.
background-size:100%; det är här jag ger orden att den ska fylla hela skärmen i sidled. Vill man att bilden ska fylla både i höjd och sidled skriver man 100% 100%. Risken då är att den blir sneddragen om man har annorlunda proportioner på skärmen.
}
Ta bort all kursiverad text om du vill göra en copy-paste.
Det det finns mycket mer jag skulle kunna skriva, förklara och utveckla men jag tror jag stanna här. För bådas skulle ;)
Ställ gärna frågor om du har några. Skulle du ha tips på hur jag skulle kunna göra det annorlunda så säg gärna till.
Lämna ett svar