14 svar · 981 visningar · startad av devotion
Hej! :)
Jag håller på att pilla med en hemsida...
Skulle vilja testa att ha "trä" som bakgrund. Hittade en bild som skulle funka.
Men, hur gör man det bäst? Vill ju inte att det ska vara tungt att ladda och så, och kör man repeat, vet jag inte riktigt hur det blir.
Bifogar även bilden.
Tack på förhand!
Mvh
Henrik
Första steget är att se till att du kan göra om bilden så den bli vettig när du repetera bakgrunden (vilket din bild just nu kommer inte funka) sen 200kb är rätt stort, så allt som du kan göra för att sänka kvalitén utan att förstöra det.
Så här skulle jag ha gjort (och nu har jag gjort det åt dig. ;) )
Kapa bort plankorna på sidorna som inte syns fullt ut med bands... jag menar crop. Det kräver att plankorna ligger parallellt med bilden. Inga större problem i detta fall.
Det svåra är istället den lodrätta upprepningen. Du kan försöka snirkla med en övergång mellan den övre och nedre biten, men det kan lätt bli fult med den ojämna texturen som trä har. En billigare metod är att dubblera höjden på bilden och lägga en kopia av samma bild där, fast uppochnervänd. Jag beskärde bilden lite i under- och överkant för att skapa bättre övergångar.
Sen drog jag ner storleken litegrann, till 550 pixlars bredd. Mindre bildyta = mindre filstorlek, uppenbarligen. Men det är värt att tänka på att storleken är proportionell mot bildytan, inte bredden eller höjden för sig. Om du halverar höjden och bredden, så blir den totala bildytan (och ungefär filstorleken) en fjärdedel.
Sist av allt kommer jobbet att spara filen, där du kan påverka filstorleken med hjälp av kvalitetsinställningen. Photoshops "save for web" är smidigt för att leka med olika inställningar. Jag sparade bilden med kvalitet 48, som gav en 71 kB stor bild. Kvalitet 100 (maximalt) hade givit en storlek på 398 kB. Man hade säkert kunna putta ner storleken lite till, men 48 verkade funka bra båda kvalitets- och storleksmässigt. (Jag siktade bara någonstans i mitten på skalan.)
Ett annat tips är att applicera lite oskärpa, vilket kan minska storleken på bilden med några procent. Detta har att göra med hur jpeg komprimerar bilder. Save for web har just en inställning för detta. Det gör inte så stor skillnad gentemot förlusten av bildkvalitet i detta fall, men kan vara värt att pröva för störrre bilder där 5-10% skillnad gör... skillnad.
Och dessutom kan det vara en idé att sätta en vettig background-color, som syns om bakgrounden inte kan laddas, eller innan den laddas.
Och nedan följer alltså resultatet:
Det är ju helt fantastiskt!
Googlade lite och hittade en guide som visade hur man skulle göra. Men, kom inte så långt...
Jag bugar, bockar och häpnar över den kunskap och snabbhet som finns på Webforum!
Mvh
Henrik
Det blev jättebra, men jag kom på att det måste vara i formatet som bifogad fil...
Skulle du kunna göra en version, som har ett vitt fält i mitten (som i den bifogade bilden)?
:-)
Mvh
Henrik
ha ett block element med en fast bredd och en vänster och höger marginal satt på auto (och en vit bakgrund självklart):
.container {
width: 960px;
background: #fff;
margin: 0 auto;
}
Nja, jag tror det är fel väg att gå. För vad händer om viewporten är så bred att bakgrunden (inklusive den vita delen) upprepas? En bättre metod vore att lägga en div med vit bakgrund som innehållet hamnar i.
Edit: v var snabbare.
:)
Hmmm...
Jag fuskar ju med Wordpress.... Undrar om jag får ihop det... Jag får testa... :-)
//Henrik
Devotion, du kanske skulle utgå från ett fritt tema och bara ändra bakgrunden och andar detaljer, istället för att bygga från grunden?
Devotion, du kanske skulle utgå från ett fritt tema och bara ändra bakgrunden och andar detaljer, istället för att bygga från grunden?
Det är ju det jag gör! :)
Har ett bra tema, men kom på att jag ville ha brädor till bakgrund... :e Jag har redan insett att min tid och html/css-kunskaper inte räcker till för att skapa från grunden. Därav Wordpress. :) Frågan är väl bara om det går att tweaka till det lite.
:)
Mvh
Henrik
kan nog garantera att det finns en wrapper av något slag som du kan tillämpa den vita bakgrunden.
Säg vilket tema så kan vi ju kolla.
http://yourinspirationweb.com/demo/sheeva/home-version-5/#
Den är gjord med den bakgrunden jag postade lite längre upp...
:)
Mvh
Henrik
.wrapper ser ut som du skulle kunna använda den... om du skall ha samma vita så är bredden 1004px