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>
RESULTAT
Dans cet exemple, je me limite à écrire dans la photo.
commentaires