[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 css=”.vc_custom_1447760203351{margin-bottom: -10px !important;}”]

Create a background texture with a text block

[/vc_column_text][vc_column_text css=”.vc_custom_1447760259425{margin-right: 5% !important;}”]

In this Tips & Tricks we will learn to create a texture that repeats itself to create stylized backgrounds.

We will approach some very simple css notions and you will discover a site offering many textures.[/vc_column_text][/vc_column][vc_column width=”1/2″][vc_empty_space height=”90px”][vc_column_text css=”.vc_custom_1447760308076{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]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]First steps, please visit: transparenttextures.com
and choose the texture you want to use in pattern.

Save on your computer the texture by clicking ?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]As usual, import the texture in your media library and then create a page in your scenario.[/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]

[/vc_column_text][vc_separator color=”custom” accent_color=”#009cad”][vc_column_text]Place the image in your page and then create a text box.
Double click it to edit and then click the ?HTML? button.[/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]Copy the following piece of code within the html editor:

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

background-image: url(url image);

“><p><br></p></div>

For a little explanation, we create a container (div) to which we indicate in its style that it must take the full width and height of the text block (height: 100% width: 100%) then it will receive a background image (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]We must now indicate which image to use. We will therefore need our texture?s URL to integrate it into the text block, instead of the ?image url”.[/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]Go back into the HTML of your text block, then paste the link of the texture instead of ?image_url?.

You should now see your texture in black and white repeat itself inside your text block![/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]You can now change the color of your texture by changing the color of your text block.

Indeed, textures on the site that we indicated are transparent, so they will let appear the background color that we apply to the text block.

To do this go to the text block properties and change the ?background-color?.

To go further you can change the color when clicking a button, for example.

Enjoy experimenting![/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]

More
tutorials:

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

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

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