CSS: Creating Textured Backgrounds

In CSS, the users can apply various properties to place the background of the element. Moreover, CSS also permits its users to add a textured image as the element’s background. The “background-image” property is used for setting one or more images as background images. Whereas the “background-repeat” CSS property makes the background image repeat and textured.

In this tutorial, we will illustrate the method for creating a textured background.

How to Create Textured Background by Utilizing the CSS?

Follow the procedure to create a textured background by utilizing the CSS.

Step 1: Create a div Container

In an HTML document, create a simple “<div>” element with the class name “t-background”.

Step 2: Add Section

Then, add a “<section>” tag along with the “style” attribute, and set the style as “display: flex”. This property is utilized to set the layout or length of flexible items or elements.

Step 3: Make Another div

Inside the “<div>” container, insert another two <div> elements along with “texture-1” and “texture-2” classes, respectively:

Step 4: Access Class Elements

In the CSS section, access both “div” containers having classes “texture-1” and “texture-2” using the dot selector. Then, try the mentioned CSS styling properties:

.texture-1, .texture-2 {

margin:50px;

height:200px;

width:200px;

background-color: #1ece85;

}

Here:

We have used the “margin” property to specify the space around the element.
Then, the “height” attribute is utilized for allocating the height to the element.
The “width” property is set as “200px” to define the element width.
“background-color” CSS property allocates the color for the element’s background.

The resultant image describes the output of the above code:

Step 5: Create Background as Textured

Now, apply the following CSS properties to make the background textured:

.texture-1{

background-image: repeating-linear-gradient(36deg, rgba(255, 253, 253, 0.1), rgba(255,255,255, 0.1) 1px, transparent 0px, transparent 2px);

}

First, use the “.textured-1” class to access the first <div> element and apply the various properties:

“background-image” property is used for setting the image at the back side of the element.
“repeating-linear-gradient” is a function used to set the background image. This CSS function makes an image consist of repeating linear gradients.
Then, set the angle as “36deg” for repeating gradient-tilted degrees.
After that, specify the color for the repeating-linear-gradient as “rgba(255, 253, 253, 0.1)” and “rgba(255,255,255, 0.1) 1px”.
Lastly, add transparency to the background image.

Let’s apply a texture background for second “<div>”:

.texture-2 {

background-image: url(/leaves.png);

background-repeat: repeat;

}

Now, access the second “<div>” using “.texture-2”. Then, apply the “background-image” property and set the image by utilizing the URL of that image. After that, the “background-repeat” attribute is used to repeat the image at the backside.

Output

It can be observed that we have successfully created the textured backgrounds.

Conclusion

To create the textured backgrounds, first, create a “<div>” container. Then, add two more “<div>” containers in the same manner and assign them the classes. After that, access the elements using their respective classes and apply the “background-image” and “background-repeat” properties. This post has explained the procedure for creating textured backgrounds.