Centrera en bakgrundsbild som är större än skärmen

3 svar · 1 483 visningar · startad av geeky 22 jan. 2010

geekyMedlem sedan mars 200815 inlägg

Frågan22 jan. 2010 21:46#1

Hej,

Jag har en bakgrundsbild som är 1460px bred och det är bredare än upplösningen på de flesta skärmar, så det skapas en horisontell scroll. Jag vill kunna centrera denna bakgrundsbild på skärmen och samtidigt slippa scrollen. Men jag lyckas inte klura ut hur jag ska göra det.

Sidan är i princip uppbyggd på följande sätt:

<body>
<div id="bakgrundsbilden i denna div">

Innehållet finns här

</div>
</body>

Jag har försökt köra overflow:hidden på body men resultatet blir bara att innehållet på sidan högerställs. Att minska ner bakgrundsbilden till lämligare storlekar går inte eftersom att bakgrundsbildens design är på ett sådant sätt att designen skulle skymmas av innehållet om den minskades.

Jag vill att det ska fungera som det fungerar på Twitter. Om man kollar på en random sida på Twitter så ser man att bakgrundsbilden kan bli hur stor som helst utan att det skapas en scroll och innehållet är alltid centrerat. Det är så jag vill ha det på min sida, men kan inte klura ut hur Twitter gör det.

Någon som vet hur man kan göra så?

voigtann1Medlem sedan juni 20019 519 inlägg

22 jan. 2010 22:19#2

sätt det som en CSS bakgrund, centera den, inga problem.

nitro2k01Medlem sedan aug. 20039 340 inlägg

22 jan. 2010 22:47#3

Så här t ex:

<style type="text/css">
#mindiv{
    background-position: top center;
    background-image: url('http://farm3.static.flickr.com/2798/4226215232_28f6bffb6c_o.jpg');
    background-attachment: fixed;
}
</style>
<div id="mindiv">

Då får du bakgrunden centrerad. Om du vill ha det som på Twitter-sidan kan du byta top center mot top left. Du kan också background-repeat och background-color vid behov. Se denna sida: http://www.w3schools.com/css/css_background.asp

geekyMedlem sedan mars 200815 inlägg

23 jan. 2010 19:15#4

Tack för hjälpen. Jag hade skrivit css:en som nitro2k01 tipsar men jag hade även satt dess exakta width (width: 1460px) och det skapade scrollen. Men man behövde visst inte specifikt sätta width:en.