EXEMPLE D'ARRIERE-PLAN SANS STYLE SPECIFIQUE ASSOCIE
CODE
<div style="width:650px; height:800px; border:solid 1px black; padding:10px; border:solid 1px black;
background-image:url(http://img.over-blog-kiwi.com/1/30/51/51/20150131/ob_3fb5a9_at.png);">
<div style="background-color:silver; padding:4px 10px; opacity:0.8;">
Exemple d'arrière plan sans style spécifique associé
</div>
</div>
RESULTAT
EXEMPLE D'ARRIERE-PLAN AVEC LA PROPRIETE "BACKGROUND-SIZE:COVER"
Lorsque vous avez fixé votre arrière-plan et après l'avoir mis aux dimension de votre page, vous pouvez écrire dessus et mettre tout ce que vous voulez comme dans une page normale d'article.
CODE
<div style="width:650px; height:800px; border:solid 1px black; padding:10px;
background-image:url(http://img.over-blog-kiwi.com/1/30/51/51/20150131/ob_3fb5a9_at.png); background-size:cover;">
<div style="background-color:silver; padding:4px 10px; opacity:0.8;">
Exemple d'arrière plan avec la propriété :
background-size:cover et maintenant sur l'arrière-plan vous pouvez écrire tout ce que vous voulez et même mettre des photos puisque l'attribut "cover" indique que vous pouvez le "couvrir".
</div>
<div style="background-color:silver; padding:4px 10px; opacity:0.8;">
</div>
</div>
RESULTAT
EXEMPLE D'ARRIERE-PLAN AVEC LA PROPRIETE "BACKGROUND SIZE: CONTAIN"
CODE
<div style="width:650px; height:280px; border:solid 1px black; padding:10px;
background-image:url(http://img.over-blog-kiwi.com/1/30/51/51/20150131/ob_3fb5a9_at.png); background-size:contain;">
<div style="background-color:silver; padding:4px 10px; opacity:0.8;">
Exemple d'arrière plan avec la propriété : background-size:contain
</div>
</div>
RESULTAT
Dans cet exemple, plus vous diminuez la hauteur, plus le nombre de figurines est important. Avec une seule photo "png" vous pouvez donc faire une frise sur laquelle, bien entendu, vous pouvez écrire.
EXEMPLE DE TRAVAIL SUR L'ARRIERE-PLAN AVEC LA PROPRIETE
"BACKGROUND-SIZE:COVER"
CODE
<div style="width:650px; height:800px; border:solid 1px black; padding:10px;
background-image:url(http://img.over-blog-kiwi.com/1/30/51/51/20150131/ob_3fb5a9_at.png); background-size:cover;">
<div style="background-color:silver; padding:4px 10px; opacity:0.8;">
Exemple d'arrière plan avec la propriété :
background-size:cover et maintenant sur l'arrière-plan vous pouvez écrire tout ce que vous voulez et même mettre des photos puisque l'attribut "cover" indique que vous pouvez le "couvrir".
</div>
<div style="background-color:silver; padding:4px 10px; opacity:0.8;">
</div>
</div>
J'ajoute du texte et même une photo qui recouvre ( "cover" ) mon arrière-plan.
Dans le code html, vous pouvez modifier toutes les valeurs, mettre une autre police, changer sa couleur mettre <strong></strong> pour que le texte soit en gras.
Vous pouvez aussi modifier la valeur de "opacity", la couleur de "background" qui peut devenir "white" "pink" "green" etc.
Vous pouvez également centrer l'image avec "center"
RESULTAT

commentaires