[vc_row][vc_column][vc_empty_space height= »50px »][vc_column_text]

[/vc_column_text][/vc_column][/vc_row][vc_row type= »color » bg_color= »#e8e8e8″ vertical_align= »yes » column_gap= »no » padding_top= » » margin_top= »0″ margin_bottom= »0″ min_height= »220″][vc_column width= »1/2″][vc_empty_space height= »30px »][vc_column_text letter_spacing= » » css= ».vc_custom_1475247118510{margin-bottom: -10px !important;} »]

Créer un fond de texture à l’aide d’un bloc texte

[/vc_column_text][vc_column_text letter_spacing= » » css= ».vc_custom_1475247147977{margin-right: 5% !important;} »]

Dans ce Tips & Tricks nous allons apprendre à créer une texture qui se répète pour créer des fonds stylisés.

Nous aborderons des notions très simples de css et nous vous ferons découvrir un site proposant de nombreuses textures.[/vc_column_text][/vc_column][vc_column width= »1/2″][vc_empty_space height= »90px »][vc_column_text letter_spacing= » » css= ».vc_custom_1475247165086{margin-left: 5% !important;} »]

[/vc_column_text][/vc_column][/vc_row][vc_row padding_top= » »][vc_column width= »5/6″][vc_single_image image= »123″ img_size= »full » alignment= »center »][vc_empty_space height= »10px »][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]Dans un premier temps, rendez vous sur : transparenttextures.com
afin de choisir la texture que vous désirez utiliser en motif.

Enregistrez sur votre ordinateur la texture en cliquant sur « Download ».[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »772″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447760626224{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Comme d’habitude, importez la texture dans votre bibliothèque de médias, puis créez une page dans votre scénario.[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »775″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447760967307{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »30px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]Placez l’image dans votre page et créez alors un bloc de texte.
Double cliquez dessus pour l’éditer puis cliquez sur le bouton « HTML ».[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »778″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447760752465{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Copiez le bout de code suivant à l’intérieur de l’éditeur html :

<div class="bg" style="height:100%; width:100%;

background-image: url(url image);

« ><p><br></p></div>

Pour la petite explication, nous créons un conteneur (div) auquel nous indiquons dans son style qu’il doit prendre toute la largeur et la hauteur du bloc de texte (height:100%; width:100%;) puis qu’il recevra une image de fond (background-image:).[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »781″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447761044670{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner][vc_empty_space height= »50px »][vc_separator color= »custom » accent_color= »#e8e8e8″][vc_empty_space height= »10px »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]

[/vc_column_text][vc_separator color= »custom » accent_color= »#009cad »][vc_column_text letter_spacing= » »]Il faut désormais lui indiquer quelle image utiliser. Il va donc nous falloir l’URL de notre texture afin de l’intégrer dans le bloc texte à la place de « url image ».

Pour ce faire, lancez l’aperçu, faites un clic droit sur votre texture, puis « copiez l’url de l’image ».[/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »784″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447761207887{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text letter_spacing= » »]Retournez dans le HTML de votre bloc texte, puis collez le lien de la texture à la place de « URL_image ».

Vous devriez désormais voir votre texture en noir et blanc se répéter à l’intérieur de votre bloc texte ![/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »787″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447761280840{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][vc_row_inner][vc_column_inner width= »1/3″][vc_column_text]Vous pouvez d?sormais changer la couleur de votre texture en changeant la couleur de votre bloc texte.

En effet les textures sur le site que nous vous indiquions sont transparentes, elles vont donc laisser apparaitre la couleur de fond que nous appliquons au bloc.

Pour ce faire rendez-vous dans les propri?t?s du bloc texte et changez le ??background-color??.
Pour aller plus loin vous pourrez changer cette couleur lors du clic sur un bouton par exemple.

Bonnes exp?rimentations ![/vc_column_text][/vc_column_inner][vc_column_inner width= »2/3″][vc_single_image image= »790″ img_size= »full » onclick= »link_image » css= ».vc_custom_1447761311618{margin-right: 5% !important;} »][/vc_column_inner][/vc_row_inner][/vc_column][vc_column width= »1/6″][vc_empty_space height= »50px »][vc_widget_sidebar sidebar_id= »sidebar-1″][/vc_column][/vc_row][vc_row padding_top= »0″ padding_bottom= »0″][vc_column][vc_empty_space][vc_single_image image= »132″ img_size= »full » alignment= »center »][/vc_column][/vc_row][vc_row type= »color » bg_color= »#e8e8e8″ vertical_align= »yes » column_gap= »no » padding_top= » » margin_top= »0″ margin_bottom= »0″ min_height= »220″][vc_column width= »1/3″][vc_empty_space][vc_column_text]

Plus de
tutoriels :

[/vc_column_text][/vc_column][vc_column width= »1/3″][vc_empty_space height= »65px »][vc_column_text letter_spacing= » »]

• Importer une vidéo
• Importer un son
• Importer une image
• Créer un calque d’action

[/vc_column_text][/vc_column][vc_column width= »1/3″][vc_empty_space height= »65px »][vc_column_text letter_spacing= » »]

• Charger des médias
• Préparer ses médias
• Remplacer un média
• Supprimer un média

[/vc_column_text][/vc_column][/vc_row]