WN - Bakgrundsbild

Citat:

Originally posted by FunTrix@Feb 15 2009, 23:07
Ja vad bör man tänka på om man funderar på att lägga till en stor bakgrundsbild på sidan likt den som http://www.islandreefjob.com/ har med öarna och planet i bakgrunden? Visst är det snyggt men hur ska man tänka om man vill anpassa en sådan sida till en massa olika skärmstorlekar m.m.?

Hej,
det finns en hel del sätt att lösa detta på. Lite beroende på hur din bild ser ut och därmed vilka problem du ställs inför.

Kollar vi på http://www.islandreefjob.com/ så är lösningen relativt enkel, eftersom bakgrundsbilden enbart är på botten av sidan och centrerad, det vill säga den hade fade på höger/vänster samt upp. Det skulle kunna lösas på följande vis;

Kod:

//CSS

#bg_back {

        background:#0099FF;

}

#bg_front {

        background:url(minbakgrund.png) no-repeat;

        margin:0 auto;

        width:800px; height:170px;

}



//HTML

<!--SIDAN I ÖVRIGT HÄR OVAN-->

<div id="bg_back">

        <div id="bg_front"></div>

</div>

Ett annat sätt är som t.ex. http://www.gamespot.com/ ofta gör (just i skrivande stund verkar de inte ha en bakgrund men de brukar ha, men kolla vidare in på sajten så kanske de har) är att ha en enda stor bild, större än alla vanliga skärmstorlekar. Detta fungerar jätte bra när man vill ha en stor bild, men inte är rädd att inte hela bilden alltid visas. Med tanke på att de flesta har 1024, kanske till och med 1280, så bör 1600 vara mer än nog i storlek.

Kod:

//CSS

body {

        background:#000000 url(minbakgrund.png) center top no-repeat; //Tänk på att även här fungerar en bild som har fade på höger/vänster + ner bäst.

}

Ytterligare ett sätt att lösa det på är att ha en bild som lägger sig 100% över hela sidan. Då bör man ha en bild som är i proportion med vanlig skärmstorlek. Bilden kan se lite konstig ut ibland dock.

Kod:

//CSS

#bg {

        position:absolute;

        top:0; left:0;

        width:100%;

        height:100%;

}

#page {

        position:relative;

        top:0;

        left:0;

}



//HTML

<body>

<img src="bg.png" id="bg" />

<div id="page">Här har jag hela mitt innehåll.</div>

</body>