Taille background lien CSS
BennyB44
Messages postés
2
Statut
Membre
-
incube -
incube -
Bonjour,
Je suis actuellement dans la création d'un site basé sur un script CSS.
J'ai créé un menu horizontal et j'aimerai pouvoir modifier la taille de l'image de fond des liens du menu pour qu'une grande image s'affiche derriere en hover.
Quelqu'un a-t-il la solution image ?
Je suis actuellement dans la création d'un site basé sur un script CSS.
J'ai créé un menu horizontal et j'aimerai pouvoir modifier la taille de l'image de fond des liens du menu pour qu'une grande image s'affiche derriere en hover.
Quelqu'un a-t-il la solution image ?
A voir également:
- Taille background lien CSS
- Comment réduire la taille d'un fichier - Guide
- Lien url - Guide
- Créer un lien pour partager des photos - Guide
- Verificateur de lien - Guide
- Reduire taille image - Guide
4 réponses
image de fond:
html:
css:
à partir de là tu peux donc ajouter:
html:
<div class="menu">lien 1</div> <div class="menu">lien 2</div> <div class="menu">etc</div>
css:
.menu {background: url('IMAGE');}
à partir de là tu peux donc ajouter:
background-size: x y;
Merci Mikmuk,
En fait l'idée c'est qu'une image différente s'affiche en hover de chaque lien, je suis un peu à la rue la.
Voila mon CSS:
et le html:
En fait l'idée c'est qu'une image différente s'affiche en hover de chaque lien, je suis un peu à la rue la.
Voila mon CSS:
#header {
background:url(images/Banner1.jpg) no-repeat left top;
width:980px;
height:505px;
}
#header ul {
padding:435px 0 0 0;
text-align:center;
}
#header li {
list-style:none;
display:inline;
padding: 0 20px;
}
#header li a {
width:218px;
height:52px;
text-decoration:none;
color:#FEFEFE;
font-size:24px;
font-weight:bold;
}
#header li a:hover {
text-decoration:none;
color:#C41E1E;
font-size:24px;
font-weight:bold;
}
#header #active a {
text-decoration:none;
color:#ffffff;
font-size:24px;
font-weight:bold;
}
et le html:
<div id="header"> <ul> <li><a href="index.html">ACCUEIL</a></li> <li><a href="croozers_music_bio.html">BIO</a></li> <li><a href="croozers_music_artistes.html">ARTISTES</a></li> <li><a href="croozers_music_gallerie.html">GALERIE</a></li> <li><a href="">STAFF PROFILE</a></li> <li><a href="">CONTACT</a></li> </ul> </div>
ben je vois pas le problème
tu met background-size: x y;
dans le truc normal
t'en met un autre différent dans le hover.
tu met background-size: x y;
dans le truc normal
t'en met un autre différent dans le hover.
Exactement tu peux mettre:
Mais pour cela je te conseillerais de faire ton image en sprite.
Tu fais une image, ton normal en haut de celle-ci et ton hover dans le bas de celle ci.
ce qui donnera pour ton code :
#header li a {
background: url('tonimage') no-repeat left top;
}
#header li a:hover {
background: url('tonimagehover') no-repeat left top;
}
Mais pour cela je te conseillerais de faire ton image en sprite.
Tu fais une image, ton normal en haut de celle-ci et ton hover dans le bas de celle ci.
ce qui donnera pour ton code :
#header li a {
background: url('tonimagesprite') no-repeat left top;
}
#header li a:hover {
background: url('tonimagesprite') no-repeat left bottom;
}
