[Résolu] Background dans div

Bonjour,
C'est mon premier message et c'est une question de débutant.
J'ai créé mon site il y a fort longtemps, en tableau.
En colonne de gauche il y a un menu avec une image de fond en dégradé et une couleur de fond correspondant à la couleur du bas du dégradé. Ainsi quel que soit la hauteur du contenu central la colonne menu est "coloré", voici le code.

TD.menu	 { background-color: #B9DBEE; background-image: url('images/fondmenu.png');}

<table border="0" cellpadding="5" cellspacing="0" width="700" align="center">
    <tr><td width="770" height="200" colspan="2">header</td><tr>
<tr> <td width="170" align="center" valign="top" class="menu">menu</td><tr>
<td width="600" >contenu</td><tr></table>

Voulant abandonner la structure tableau je sèche sur le background du menu pour obtenir le même résultat, voici mon code :
body {
margin: 0;
background-image: url(images/fondpage.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-size: 100% 100%;
background-position: top center;
}
div.conteneur {
max-width: 950px;
margin-left:auto;
margin-right:auto;
}
#header {
height:200px;
background: url('images/header.jpg') no-repeat;
}
#menu{
width:200px;
background-color: #b9dbee;
background: url('images/fondmenu.png');
float:left;
}
#centre {
padding: 40px;
margin-left:200px;
background-color:rgba(255, 255, 255, 0.85);
}
L'image de fond du menu apparait bien mais si le contenu du centre est plus long que celui du menu le div du menu ne prend pas la couleur #b9dbee et l'image de fond de page apparait alors que je souhaite que ce soit la couleur de fond du menu qui apparaisse en dessous de l'image de fond du menu.
Je suppose que j'ai oublié un truc tout bête mais je ne trouve pas.

Bonjour.

Je n'ai pas tout compris mais attention quand on utilise la méga-propriété background, on ne fait pas que changer background-image, on change aussi la valeur de background-color. Si on l'a changé avant, sa valeur redevient 'transparent' si je ne m'abuse…

Bonjour,
J'ai pas vraiment compris ta réponse.
Pour mon problème je constate que si je fixe une hauteur à mon menu et au cadre "centre" identique, alors le background du menu est ok sur la totalité de la hauteur du menu, si je fixe pas de hauteur le background du menu s'arrête jste en dessous du contenu du menu.

salut,
c'est la propriété background qui est mal utilisée.
Comme te l'a dit Zelana, tu es entrain d'écraser ta valeur du background-color

#menu{
width:200px;
background-color: #b9dbee; 
background: url('images/fondmenu.png'); /* <-- ICI*/
float:left;
} 

La propriété background est une écriture raccourcie qui agit de la sorte :

background : couleur image position répétition origine rognage attachement

qui revient à condenser toutes ces propriétés

background-color
background-image
background-position
background-repeat
background-origin
background-clip
background-attachment

Donc un code correcte pourrait ressembler à ça

#menu{
width:200px;
background: #b9dbee url('images/fondmenu.png');
float:left;
} 

ou ça

#menu{
width:200px;
background-color: #b9dbee;
background-image: url('images/fondmenu.png');
float:left;
} 

Bonjour,
Merci pour cette réponse claire.
A sa lecture je pensais que mon problème allait être résolu mais ce n'est pas le cas.
Voici le résultat que j'obtiens :

le background du menu s'arrête en dessous du contenu du div
Voici le résultat souhaité (obtenu sans problème en tableau) :

En fait je me dis que ce n'est peut-être pas une question de background mais de div.
Voici les liens :
http://www.yenaraslebol.fr/essai/testdiv.html
http://www.yenaraslebol.fr/essai/testtab.html
Modifié par rveve (24 Nov 2017 - 10:36)

Bonjour.

Après un coup d'œil dans l'inspecteur du navigateur, on voit que le div qui contient le menu ne va pas jusqu'au footer puisque sa hauteur n'est pas suffisante.

D'une façon générale, en HTML et CSS, c'est le contenu qui donne la taille du contenant.

Personnellement, ça fait longtemps que je n'utilise plus float mais Flexbox…

Il y a aussi Gridlayout mais c'est une autre histoire.

Bonjour,
Merci pour cette réponse.
Effectivement le problème provient du fait que le contenu du menu est plus petit que celui du centre et par voie de conséquence également son contenant (d'ailleurs ce problème se règle si je fixe une hauteur identique à celle du centre).
La structure de mon site étant courante je suppose quand même que ce problème a bien dû être rencontré depuis l'utilisation de float et qu'une solution a été trouvée, non ?

J'ai testé flexbox et là le comportement est différent les deux div prennent la même hauteur règlant ce problème (par contre width n'est pas reconnu il faut utiliser min-width) , mais avant flexbox comment faisait-on ?

Bonjour.

Avant flexbox, comment faisait-on  ?
Pour avoir une réponse complète, il faudrait demander à un… vétéran du float.
Par exemple, il y a les colonnes factices.

Bonjour,
L'exemple du lien est intéressant mais pour l'adapter à mon exemple je suppose que ça nécessiterait alors de superposer deux bachground-image, mon paysage de fond et les fausses colonnes.
Flexbox me va bien et est plus simple je vais donc faire avec, merci.