Discussion :

[gestgm]

Bonjour,

Je rencontre un problème de gestion de background image que je n'arrive pas à résoudre.

J'ai une principale <div id="contener"> qui englobe plusieurs <div>



Sur cette div principal, j'ai mis un background-image.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
#contener {
    background-image: url("../images/accueil/fond.jpg");
    width: 960px;
    height: 1500px;
    margin: 20px auto 0px;
    border-radius: 5px;
}

Mais, pour que cette image s'affiche derrière l'ensemble des div, je suis obligé d'indiquer une hauteur, sinon, elle ne pas couvre automatiquement l'ensemble des div.

Voici un lien vers le site que je suis en train de construire.

http://objectifs-web.fr/

Difficile de donner plus d'explication ici, le problème se situe sur la page d'accueil du site, le background qui me pose problème est le lambris sur le contener qui est centré.

Si je désactive la hauteur, il ne couvre qu'un partie.

A priori, c'est un problème qui est lié à l'utilisation de la propriété float, mais je n'arrive pas à le résoudre.

Le problème que cela me pose, c'est qu'en fonction du nombre de guitare affiché, je souhaiterai que la hauteur du fond s'adapte automatiquement, ce qui n'est pas le cas actuellement.

Si quelqu'un à une idée, merci d'avance

Patrice

[NoSmoking]

Bonjour,
tes éléments LI étant en float:left, ils n'ont pas d'influence sur les dimensions de leur parent donc ton UL se retrouve avoir une hauteur de 0, donc le parent DIV de l'UL a une hauteur de 0, donc etc... jusqu'au parent <div id="contener"> qui s’agrandit d'une hauteur de ... 0.

Pour palier à cela plusieurs solutions dont ajouter un overflow: hidden; sur la <div id="contener">.

[gestgm]

Super, cela fonctionne

Merci pour le coup de pouce