dudeMedlem sedan aug. 2002386 inlägg Har sökt en massa men hittar ingen lösning på detta...
Jag har en stor bild (1900x1500 px) som jag vill ha som bakgrundsbild på hela sidan. Den ska vara 100% bred, alltså så att man ser hela bredden på bilden, sen om man då har mindre upplösning på sin skärm så kommer man ju inte se hela bilden på höjden, men det gör inget...
Alltså, hur får jag en bakgrundsbild att bli 100% bred?
Har inte pillat med hemsidor på några år nu, är det smart att göra som jag gör. Anledningen att jag har en så stor bild är ju om någon kollar på sidan med hög upplösning så vill jag ändå att bilden ska synas. Det som "händer" lite längre ner på bilden är inte så viktigt men det kommer ju synas om sidan är lite längre och man scrollar ner...
Finns inget sätt i CSS2 för att få 100% att bilden strechas, men annars så kör din stora bild och positionera den i mitten background-position: top center;
m-bloMedlem sedan maj 200423 inlägg Lägg en bild i övre vänstra hörnet:
<img src="bild.jpg" id="background" />
Sedan, i CSS:en:
img#background
{
position: absolute;
top: 0px;
left: 0px;
z-index: -1;
width: 100%;
height: 100%;
}
Då stretchar bilden när man resizar fönstret också.
dudeMedlem sedan aug. 2002386 inlägg Tack för svaret, ska testa när jag kommer hem ikväll.
En annan fråga, hur bred bör man göra en sida, alltså den delen där man har text, bilder, meny osv. Vad har folk för upplösning nuförtiden och vilken upplösning brukar designers bygga för?
rhdfMedlem sedan okt. 2007446 inlägg håll dig till 1024 x 768 ;)
och sen räknar du bort lite plats för scrollbars o annat skrot och vipps hamnar du på 960px.
Det var (är?) populärt att ha sidor som är 100% (se bara den här sidan)
dock är det aningen enerverande att läsa vissa sådana sidor när man sitter på en 22" widescreen
jarvkloMedlem sedan juli 20013 378 inlägg Här är två pinfärska artiklar:
En om att meka bakgrundsstorlekar mha CSS3 (http://www.alistapart.com/articles/supersize-that-background-please/)
och en om ett *mycket* trevligt angrepssätt för det där med sidbredder (dvs man skippar att låsa fast sig vid en sidbredd och designar en och samma layout för flera olika möjligheter istället genom att utgå från den "trängsta") - http://www.alistapart.com/articles/responsive-web-design/
Den senare med ett ypperligt exempel på hur bra det kan bli här: http://hicksdesign.co.uk/ notera särskilt att den lösningen även anpassar typsnittsstorlekar och flyttar om menyer (helt med CSS) för de "trängre" layoutvarianterna - något som iallafall jag uppskattar både mobilt och skrivbordslåst :bire