Hei!

Jobber litt med en nettside nå. Det største problemet mitt er at jeg sitter med en MacBook Pro med 1680x1050 i oppløsning, og når jeg sjekker hvordan siden ser ut i andre oppløsninger (og ved å resize nettleservinduet) blir alt bare tull. Har nå prøvd å lese meg litt frem, fordi jeg har prøvd å få bakgrunnsbilde til å stå stille når man resizer nettleservinduet, fordi sånn som det er nå så følger det etter/blir minsket i takt med vinduet. Dette ser ikke særlig bra ut!

Lurer derfor på hvordan man korrekt skal bruke et bakgrunnsbilde som skal dekke en hel side, og som ser bra ut i "alle" oppløsninger/nettlesere? Noen sier at man skal basere siden påar alle lav oppløsning, og at bildet heller burde strekkes om man har en PC som kjører på høy oppløsning.

Prøver å legge ut minst mulig kode, men regner med at det trengs noe etter hvert om man skal finne ut av det.

Har ikke prøvd det selv, men ser denne guiden riktig ut? Demo er her.

Kan godt hende at jeg forklarte det veldig dårlig, men demoen du la ut gjør nøyaktig det motsatte av hva jeg ønsker, altså at bakgrunnsbildet følger etter når jeg resizer nettleservinduet!

Det er vel bare å ha stort nok bakgrunnsbilde. Skal du ha det sentrert setter du bare "margin: 0 auto;", så vil det kuttes like mye på begge sider. Hvis du ikke setter noe høyde eller bredde, så vil ikke bildet endre størrelse. Du kan også ha mer avanserte løsninger som f.eks. flere bilder i forskjellig oppløsning hvor du får bakgrunnsbilde som passer til oppløsningen på skjermen siden vises på, men da må du vel ha et par linjer med javascript i tillegg.

Det er ikke default oppførsel at bakgrunnen resizer seg i takt med nettleservinduet. Du kan bruke background-position og kanskje background-attachment for å få bakgrunnen til virkelig å "sitte fast". Har du muligheten til å la bildet "flyte" inn i en fast farge, er dette ofte en fin løsning for å fylle tomrom på store skjermer. Du kan nemlig ha både background-image og background-color som bakgrunn. Da vil bildet legge seg oppå fargen.

Resizer? Bruker du background-egenskapen i CSS eller er det et img-element du bruker som backgrunn? Eller tenker du kun på element-strørrelsen og posisjon når du resizer nettleser-vinduet?

Body-taggen skal kanskje ikke brukes sånn, men.. Men sånn er det nå, og den resizer som bare rakker'n når jeg endrer størrelse på nettleservinduet. Men nå er det jo FireFox på Mac. Får ikke testa på Dell'n nå. Kan det ha noe med OS å gjøre?

Det er jo fordi du sier at den skal resize...

Prøv denne.

Takk Jannis, men det gjorde ingen forskjell her.

Jeg laget egen divtag med z-index: -1 og bakgrunnsbilde i den, om jeg ikke husker feil - Så satt jeg width/height til 100%. Fungerte greit nok, men ikke så optimalt at jeg valgte å benytte det.

Anbefaler heller å ta et passe stort bilde for så fade kantene på bildet ut i samme bakgrunnsfarge som er satt i body. Slik at bilde er statisk og brukerne vil dermed få en myk overgang fra bildet til bakgrunnsfargen - om de har stor oppløsning.

Implementer Media Queryes, og alt blir bra!

http://webdesignerwall.com/tutorials...-media-queries

NØYAKTIG hva jeg trengte! Takk, takk! +KP.

Flott! Skal implementere den i mine sider også, helt genial sak. Man kan slippe unna og designe .CSS filer til hver enkelt mobil-enhet også.