12 Déc2015
Mettre une image de fond dans un header
Objectif :
Utiliser des images de fond (background).
Travail à faire :
Mettre une image de fond background dans le header.
soit le code html suivant:
<!doctype html>
<html>
<head>
<title>background</title>
<meta charset="utf-8">
</head>
<body>
<div class="header ">
<div class="header-title">
<h1>Titre de l'article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
</p>
</div>
</div>
</body>
</html>
écrire le code css qui permet de réaliser ce qui suit :
Indications :
- Appliquer à la classe "header" une largeur de 100% et une hauteur de 300px.
- pour la classe "header-title" une marge du haut de 100px.
Remarque :
Remarquez qu'avec l'ajout d'une marge du haut à l’élément fils "header-title" ,elle fusionne avec la marge de l’élément parent "header" , c'est ce qu'on appelle la fusion des marges : plus d'information sur le lien fusion des marges.
Pour remédier à ce problème on peux ajouter à l’élément parent une des propriétés suivantes :
- border
- overflow : hidden ou auto
- padding
Code css
<style type="text/css">
.header {
width: 100%;
height: 300px;
color: #fff;
background:url(images/etoile.jpg);
background-position: center;
background-repeat: no-repeat;
text-align: center;
padding:1px
}
.header-title{
margin-top: 100px;
}
</style>
