Dépannage CSS background-image

Je ne suis pas habitué à déborder en pile, mais je travaille avec CSS depuis environ un an et demi.Dépannage CSS background-image

Je ne peux pas sembler obtenir la propriété d'arrière-plan pour travailler pour mon div class = "content". En fin de compte, je veux juste mettre une image de fond sur la div en utilisant background-image: url ('home_bg.png') ;. J'ai cherché le problème et ai examiné le problème de débordement de la pile, mais les problèmes que j'ai rencontrés jusqu'ici n'ont pas aidé. Je garde toutes mes images d'arrière-plan dans le même dossier que mon CSS, et j'ai vérifié que mes noms de fichiers sont corrects. Je sais que le div est ciblé correctement dans le CSS parce que les autres propriétés telles que la largeur et la marge fonctionnent correctement.

J'ai même essayé de mettre une couleur d'arrière-plan laide juste pour voir si cela fonctionnerait. Ce n'est pas le cas. Je suis sûr qu'il y a probablement quelque chose de mineur, mais je ne le trouve pas.

Le code HTML:

<body> 
<div class="navbar"> ... </div> 
<div class="content"> 
    <div class="box" id="twitter"> ... </div> 
    ... 
    ... 
</div> 
<div class="footer> ... </div> 
<body>

Le CSS:

body { 
    background-color: #000; 
    background-repeat: repeat; 
    margin: 0px; 
    padding: 0px;} 
div.content { 
    background-image: url("home_bg.png"); 
    margin: 0 auto; 
    position: relative; 
    top: 84px; 
    width: 1024px;}

La page est située here si cela aide aussi.

Merci d'avance! ~ Tatianna ~

Source

2011-11-04 TatiannaWS

Tous vos div sont float, donc votre contenu n'a pas de hauteur –

C'est votre contenu div. Il n'a pas de hauteur spécifiée et ses éléments conent sont "hors flux" (floated ou position: absolute). Cela produit effectivement un contenu div de 0px hauteur. À la différence, vous pouvez ajouter cette règle de style:

html, body, .content {height:100%;}

pas une solution mais un début.

Source

2011-11-04 01:02:33

Bien sûr, c'était la seule chose que je n'ai pas essayé. Merci beaucoup! – TatiannaWS

Le comportement que vous voyez est que div.content n'a pas de hauteur car les éléments contenus sont tous flottants. Il existe plusieurs façons de résoudre ce problème. La solution la plus rapide consiste à ajouter un élément parent pour le centrage (margin: auto) et float div.content. Un élément flottant prendra la hauteur de ses éléments imbriqués. Vous pouvez également appliquer overflow: hidden à div.content, mais vous devrez modifier votre mise en page et css un peu pour que cela fonctionne.

Source

2011-11-04 01:04:40 SDG

Cela a quelque chose à voir avec vous le rendant relatif. Si je change la propriété de position sur "fixed" ou que la hauteur est réglée sur "500px", l'arrière-plan apparaît. Si/quand je peux comprendre pourquoi cela se produit, je vous le ferai savoir.

Source

2011-11-04 01:09:45

Dépannage CSS background-image

Répondre

Questions connexes