91.980 visiteurs depuis la création

CREATION D'UN ARRIERE-PLAN AVEC DEFINITION DE LA COULEUR DE FOND.

par André Marini 1 Février 2015, 10:41 Images

On peut définir la couleur de l'arrière-plan, ici avec le code #dedede

La modification intervient uniquement à ce niveau.

CODE

<div style="border:solid 1px black; width:650px; height:400px;
background:#dedede url(http://img.over-blog-kiwi.com/1/30/51/51/20150201/ob_08e435_9.JPG) no-repeat center center;">
Définition d'une couleur de fond et affichage d'une image centrée en arrière plan de l'élément div
</div>

RESULTAT

Définition d'une couleur de fond et affichage d'une image centrée en arrière plan de l'élément div

CODE

<div style="border:solid 1px black; width:650px; height:400px;

background:#00FF00 url(http://img.over-blog-kiwi.com/1/30/51/51/20150201/ob_08e435_9.JPG) no-repeat center center;">
Définition d'une couleur de fond et affichage d'une image centrée en arrière plan de l'élément div
</div>

RESULTAT

Définition d'une couleur de fond et affichage d'une image centrée en arrière plan de l'élément div mais en agrandissant l'image, je peux recouvrir toute la partie verte et écrire dessus. En effet, l'image éditée conserve ses propriétés d'origine en longueur et en largeur puis le texte viendra la recouvrir si je continue à descendre. Pour que le texte se voit mieux, surtout lorsqu'il passe sur l'image, je peux changer sa taille et sa couleur. Je peux d'ailleurs faire ceci uniquement sur l'image ce qui donne encore plus d'effet. Ici, par exemple, je vais cahnger la couleur du texte en le faisant passer en différentes couleurs pour qu'il se voit mieux. Allons-y essayons parce que je ne suis pas certain du résultat dans la mesure où ce blog me sert à mieux comprendre les langages que j'utilise au quotidien sur lmes blogs Je pense d'ialleurs que, comme fond, il vaut mieux utiliser une photo différente, celle-ci étant très marquée en couleur mais une photo de paysage peut convenir

PAYSAGE DE FORÊT

Avec #FFF0F5 qui est le code d'une nuance beige.

CODE

<div style="border:solid 1px black; width:650px; height:400px;

background:#FFF0F5 url(http://img.over-blog-kiwi.com/1/30/51/51/20150201/ob_b6a759_chemin-foret-de-montmorency-55.png) no-repeat center center;">
Dans cet exemple, je me limite à écrire dans la photo.
</div>