centreer een achtergrondafbeelding naar een div die een minimale breedte heeft, zelfs als de pagina smaller is dan de div

html

<div id="outer">
  <div id="inner">
    Lorem Ipsum...
  </div>
</div>

css

#outer { background: url('mypic.jpg') no-repeat center top; }
#inner { width: 960px; margin: 10px auto; }

Deze code centreert mijn achtergrondafbeelding mooi, behalve wanneer mijn browser smaller wordt dan de 960px-breedte van #inner. In deze smallere browser behouden #inner en #outer hun 960px-breedte zoals verwacht (waardoor een horizontale browser-schuifbalk wordt weergegeven), maar de achtergrondafbeelding op #outer richt zichzelf naar het browservenster in plaats van de #outer-div. Hoe kan ik de achtergrondafbeelding onderhouden die gecentreerd moet zijn naar de div in plaats van naar het browservenster?

1
Voorbeeld, let op hoe het beeld op het scherm blijft, ook al is de buitenste div aan de rechterkant van het scherm. jsfiddle.net/5Kn7s
toegevoegd de auteur mrtsherman, de bron
Eigenlijk is dit echt raar - jsfiddle.net/5Kn7s/1 Let op de rode rand. De buitenste div groeit niet mee met zijn kindercontainer ??? Daarom blijft het beeld gecentreerd op het scherm.
toegevoegd de auteur mrtsherman, de bron

1 antwoord

Ik weet eigenlijk niet het juiste antwoord op de reden waarom dit gebeurt, maar als je een breedte toepast op de buitenkant, wordt deze nu weergegeven zoals jij dat wilt. Dit is echter niet hoe ik dacht dat het model werkte. Zeer verward :/

#outer { min-width: 960px; }

http://jsfiddle.net/5Kn7s/3/

Oké, dit werkt ook, maar wordt niet ondersteund door IE7 of IE6

#outer { display: table-cell; }

http://jsfiddle.net/5Kn7s/4/

Dit is heel vreemd gedrag, maar blijkbaar als je een div hebt zonder de breedte gespecificeerd, en zelfs als het kind breder is dan het bovenliggende, wordt het bovenliggend alleen zo breed als het scherm.

0
toegevoegd