docBackground - 31 place Web
download 
Plainte Transcription
Background - 31 place Web
TP 13 – Background
Background-image
Utiliser les propriétés background en fond et en survol
1 - Préparation
Créer un fichier background.html dans [page]
Créer un fichier background_style.css dans [page] > [style]
Liez ces 2 fichiers.
Copiez depuis [documents] > [images] : fond.png et bouton.png dans le
dossier [page] > [img]
2 - Dans background.html
Copiez-collez le code suivant entre les balises <body></body> :
<div id="page">
<nav>
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
Page 1 sur 4
http://31-place-web.net/HTML5-CSS3
TP 13 – Background
3 - Dans background_style.css
Copiez-collez le code suivant directement :
/** CSS du fichier background.html **/
*{
padding:0;
margin:0;
}
body{
font-family: Arial, Helvetica, sans-serif;
/* CSS à ajouter ICI */
}
#page {
width: 500px;
height: 150px;
border: 1px solid #48331b;
margin-top: 30px;
margin-right:auto;
margin-left: auto;
background-color: rgba(0,0,0,0.2);
}
ul{
margin-top: 60px;
margin-left: 40px;
list-style: none;
}
li{
float: left;
margin-right: 5px;
text-align: center;
width: 135px;
}
a {
display: block;
font-size: 13px;
font-weight: bold;
height: 20px;
padding: 5px 0 0;
text-decoration: none;
/* CSS à ajouter ICI */
}
a:hover {
/* CSS à ajouter ICI */
}
Page 2 sur 4
http://31-place-web.net/HTML5-CSS3
TP 13 – Background
Résultat 1
3- Consignes
Vous devrez parvenir au résultat 2 en "traduisant en CSS" les propriétés listées cidessous
body{
mettre fond.png en image de fond
faire une répétition horizontale de cette image (x)
appliquer la couleur de fond : #583d21
}
a{
mettre bouton.png en image de fond
pas de répétition du fond
fond aligné en haut et à gauche
couleur de police : #2C1F13
}
a:hover{
mettre bouton.png en image de fond
pas de répétition du fond
fond aligné en haut et à droite
couleur de police : #FFF7E6
}
Page 3 sur 4
http://31-place-web.net/HTML5-CSS3
TP 13 – Background
Résultat 2 :
Page 4 sur 4
http://31-place-web.net/HTML5-CSS3
