Taille background lien CSS
Fermé
BennyB44
Messages postés
2
Date d'inscription
samedi 19 mai 2012
Statut
Membre
Dernière intervention
19 mai 2012
-
19 mai 2012 à 01:09
incube - 5 juin 2012 à 15:34
incube - 5 juin 2012 à 15:34
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
- Verifier un lien - Guide
- Css lien non souligné - Astuces et Solutions
4 réponses
mikmuk
Messages postés
156
Date d'inscription
dimanche 22 août 2010
Statut
Membre
Dernière intervention
17 janvier 2013
7
Modifié par mikmuk le 19/05/2012 à 03:26
Modifié par mikmuk le 19/05/2012 à 03:26
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;
BennyB44
Messages postés
2
Date d'inscription
samedi 19 mai 2012
Statut
Membre
Dernière intervention
19 mai 2012
19 mai 2012 à 09:29
19 mai 2012 à 09:29
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>
mikmuk
Messages postés
156
Date d'inscription
dimanche 22 août 2010
Statut
Membre
Dernière intervention
17 janvier 2013
7
1 juin 2012 à 22:25
1 juin 2012 à 22:25
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;
}
