1 pièce(s) jointe(s)
Manipulation de background
Bonjour,
Ma situation est assez difficile à décrire sans vous montrer ma page avant.
Voici donc une version (très simplifiée) de mon html et de mon css.
Code:
1
2
3
4
5
6
7
| <div id="container">
<div id="ligne-menu">
<div id="menu">
<p> Ici il y aura le menu </p>
</div>
</div>
</div> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| #container{
position:relative;
background-color:yellow;
height:40%;
width:100%;
}
#ligne-menu{
position:absolute;
background-color:green;
width:100%;
height:50px;
margin-top:80px;
}
#menu{
position:absolute;
background:url(bouton.png);
width:800px;
height:100%;
left:20%;
height:50px;
text-align:center;
} |
Comme vous pouvez le voir, j'ai une ligne de menu faisant toute la largeur de la fenêtre (la verte).
Le menu est à l'intérieur de cette barre de menu avec une image de background répétée (la bande marron) que j'ai mise en pièce jointe. Le problème vient du fait que cette image a en fait une hauteur équivalente à celle de la ligne de menu, avec 2 bandes transparentes en haut et en bas (c'est normal). Donc là au dessus et en dessous de la zone marron apparait la zone verte. J'aimerais en fait que la zone verte derrière le menu soit virée afin d'entrevoir la jaune en zone transparente de l'image directement.
La solution qui est de rajouter un background-jaune derrière l'image ne sera pas adaptée car la couleur de fond jaune est en fait une image qui sera changée régulièrement.
Avez vous une solution à me proposer?
Désolé si je n'ai pas été clair :mouarf: mais je répondrais à vos questions pour plus de précisions.
Par avance merci et bonne journée
