CSS3 Backgrounds nouvelles propriétés d'arrière-plan

CSS3 contient plusieurs nouvelles propriétés d'arrière-plan, qui permettent un meilleur contrôle de l'élément background.
Dans ce chapitre, vous apprendrez les propriétés d'arrière-plan suivantes :
background-size
background-origin
Plusieurs Images d’arrière plans :Vous apprendrez également comment utiliser plusieurs images d'arrière-plan.

Somaire

Arrière-plans de CSS3

CSS3 cours tutorial

Prise en charge des navigateurs

Propriété

Appui de navigateur

background-size

chrome

fire-fox

IE

opera

safari

background-origin

chrome

fire-fox

IE

opera

safari

Internet Explorer 9 et +, Firefox, Chrome, Safari et Opera soutiennent les nouvelles propriétés de l'arrière-plan.


CSS3 La propriété background-size

La propriété background-size spécifie la taille de l'image d'arrière-plan.

Et donc la propriété background-size permet de contrôler la taille de l’image d’arrière plan.

Avant CSS3, la taille de l'image de fond était déterminée par la taille réelle de l'image. Dans CSS3 Il est possible de spécifier la taille de l'image de fond, ce qui permet de réutiliser les mêmes images d'arrière-plan dans des contextes différents.

Vous pouvez spécifier la taille en pixels ou en pourcentage. Si vous indiquez la taille, la taille dépend de la largeur et la hauteur de l'élément parent.

Voici l’image origine utilisée dans l’exemple 1 et 2 qui suivent arbre

Exemple 1 Redimensionner une image d'arrière-plan :

Sélectionner le code

 <!doctype html>
 <html lang="fr">
 <head>
             <meta charset="UTF-8">
             <title>background</title>
 <style> 
	 body
	 {
	 background:url(http://www.oujood.com/css3/images/arbre.gif);
	 background-size:80px 60px;
	 background-repeat:repeat-x;
	 padding-top:90px;
	 }
 </style>
 </head>
 <body>

	<p>l'image d'origine: <img src="http://www.oujood.com/css3/images/arbre.gif" alt="Fleurs" width="224" height="162"></p>

 </body>
 </html>
 

Exemple 2 Étirer l'image d'arrière-plan pour remplir complètement la zone de contenu :

Sélectionner le code

 <!doctype html>
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
   <title>background</title>
 <style> 
	 body
	 {
	 background:url(http://www.oujood.com/css3/images/arbre.gif);
	 background-size:100% 100%;
	 background-repeat:no-repeat;
	 min-height:30em;
	 }
 </style>
 </head>
 <body>
 </body>
 </html>
 

CSS3 La propriété background-origin

La propriété background-origin spécifie la zone de positionnement des images d'arrière-plan.

La propriété background-origin a été introduite dans CSS3 pour la définition de l'aire de positionnement d'un élément d'arrière-plan.

La propriété background-origin vous permet de spécifier si l'arrière-plan sera positionné par rapport à la zone de "contenue", la zone " frontière" ou la zone de  "padding".

 
Exemple Position de l'image d'arrière-plan dans la zone de contenu :

Sélectionner le code

 <!doctype html>
 <html lang="fr">
 <head>
             <meta charset="UTF-8">
             <title>background</title>
 <style> 
 div
 {
 width:30em;
 border:5px solid #00ffff;
 margin-top:2em;
 padding:25px;
 background-image:url('http://www.oujood.com/css3/images/regular-smile.gif');
 background-repeat:no-repeat;
 background-position:left;
 }
 #div1
 {
 background-origin:border-box;
 }
 #div2
 {
 background-origin:padding-box;
 }
 #div3
 {
 background-origin:content-box;
 }
 </style>
 </head>
 <body>


 <div id="div1"><p>background-origin:border-box:</p>
 <p>Tien voici un texte pour le remplissage du paragraphe. Un texte de remplissage est seulement un texte de remplissage. Il est là pour donner un contenu au paragraphe.</p>
 </div>


 <div id="div2"><p>background-origin:padding-box:</p>
 <p>Tien voici un texte pour le remplissage du paragraphe. Un texte de remplissage est seulement un texte de remplissage. Il est là pour donner un contenu au paragraphe.</p>
 </div>

 <div id="div3"><p>background-origin:content-box:</p>
 <p>Tien voici un texte pour le remplissage du paragraphe. Un texte de remplissage est seulement un texte de remplissage. Il est là pour donner un contenu au paragraphe.</p>
 </div>
 </body>
 </html>
 

CSS3 Plusieurs Images d’arrière plans

CSS3 vous permet d'utiliser plusieurs images d'arrière-plan pour un élément.

Exemple Définissez deux images d'arrière-plan de l'élément body :

Sélectionner le code

 <!doctype html>
 <html lang="fr">
 <head>
             <meta charset="UTF-8">
             <title>background</title>
 <style> 
 body
 { 
 background-image:url(http://www.oujood.com/css3/images/fleurs1.gif),url(http://www.oujood.com/css3/images/arbre.gif);
 }

 </style>
 </head>
 <body>
 </body>
 </html>
 
Par carabde 10 mars 2014

chapitre précédent sommaire chapitre suivant