Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
Cours XHTML/CSS Lundi 9 Février 2009
Aujourd'hui, l'arrière-plan des balises <div>
2
Un arrière-plan dans un div
Pour définir une image d'arrière-plan dans une balise <div>, il suffit de préciser son URL dans la propriété background-image : <div style="background-image: url(chute-eau.jpg); ">
3
Exercice Définissez une balise <DIV> en utilisant un arrière-plan JPG de votre choix. Définissez les propriétés suivantes pour ce DIV : Taille du texte : 40 px Couleur du texte : red
4
Solution <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <body> <div style="background-image: url(image.jpg); font-size: 40px; color: yellow;"> Ce texte est affiché au dessus de l'arrière-plan image.jpg. </div> </body> </html>
5
Répétition de l'arrière-plan
Pour répéter un arière-plan sur toute la surface d'un <DIV>, il suffit de le positionner en flottant à gauche du <DIV> : <div style="width: largeur_du_div; height: hauteur_du_div; background-image: url(image.jpg); float: left;"></div>
6
Exercice Définissez une balise <DIV> ayant les caractéristiques suivantes : Largeur : 300px Hauteur : 200px Image d'arrière-plan : téléchargée depuis Style de bordure (border-style) initialisé à solid Positionnement float: left Vous devriez obtenir ce résultat :
7
La solution <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html> <body> <div style="width: 300px; height: 200px; background-image: url(20.jpg); border-style: solid; float: left;"></div> </body> </html>
8
Répétition partielle de l'arrière-plan
Pour ne répéter l'arrière-plan qu'horizontalement, vous utiliserez un positionnement flottant et vous initialiserez la propriété background-repeat avec la valeur repeat-x. Bien évidemment, la valeur repeat-y limite la répétition à l'axe vertical. <div style="background-image: url(image.jpg); background-repeat: repeat-x; float: left;"></div>
9
Exercice Définissez une balise <DIV> ayant les caractéristiques suivantes : Largeur : 300px Hauteur : 200px Image d'arrière-plan : téléchargée depuis Style de bordure (border-style) initialisé à solid Positionnement float: left Répétition horizontale seulement (background-repeat: repeat-x) Vous devriez obtenir ce résultat :
Présentations similaires
