106.284 visiteurs uniques depuis la création pour 1.966.617 articles lus

CREATION D'UN ARRIERE-PLAN AVEC UNE IMAGE PNG EDITEE.

par André Marini 31 Janvier 2015, 19:36 Images

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'arrière plan sans style spécifique associé

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="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'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".

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 d'arrière plan avec la propriété : background-size:contain

EXEMPLE DE TRAVAIL SUR L'ARRIERE-PLAN AVEC LA PROPRIETE

"BACKGROUND-SIZE:COVER"

CODE

<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

Voici la photo de Victor Hugo placée sur l'arrière-plan de ces trois jolies petites dames.

Plus j'écris, plus l'encart gris descend avec ma frappe et pourrait, si je le veux, recouvrir la totalité de l'arrière plan, ce qui serait bien évidemment dommage parce que les trois demoiselles sont évidemment plus agréables à regarder que Victor Hugo.'