How to create texture background using CSS ?

Last Updated : 17 Mar, 2023

Introduction: We can use CSS property to texture the background of the web page by using an image editor to cut out a portion of the background. Apply CSS background-repeat property to make the small image fill the area where it is used. CSS provides many styling properties of the background including coloring the background, background images, etc. Background properties. are background color, background image, background position, and background attachment.

The approach of texturing the background: There are some steps for texturing the background using CSS with examples and explanations.

Create an html file using HTML tags.

html

<html>

<head>
    <title>
        Texture Background
        Using CSS 
    </title>
</head>
<body></body>

</html>

Choose the texture color that we want to set in the Background. Save the texture color in image format like(.png, .jpg etc)

Suppose we want to set the background of this web page using internal sheet CSS. So write the following code in head section.

CSS

<style>
    body {
        background-image: url("BG.jpg");
        background-repeat: repeat/no-repeat;
        background-size: 1600px 840px:
    }
</style>

Example:

html

<!DOCTYPE>
<html>

<head>
    <title>
        Texture Background using CSS
    </title>

    <style>
        body {
            background-image: url(
"https://write.geeksforgeeks.org/wp-content/uploads/backgroundimage-1.png");
            background-repeat: no-repeapt;
        }
    </style>
</head>

<body>
    <h1>
        This is our texture
        background
    </h1>
</body>

</html>

Explanation: In this code, we are placing the image in the background through background-image:url("backgroundimage-1.png"); in the form of .jpg. It can be in .png also.Here, we are not repeating the image in the background so, the image shown only one time in the background, background-repeat:no-repeapt; this syntax means image is not repeating. These all commands are written in <style> tag using CSS.

Output:

Example 2: To create a textured background using CSS, we can use a combination of CSS background properties and an image.

Syntax:

body {
      background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5));
      background-repeat: repeat;
      background-size: 200px;
      background-position: center;
      background-color: #b5dc89;
}

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Textured Background Example</title>
    <style>
        body {
            background: linear-gradient(to bottom, 
                          rgba(0, 0, 0, 0), 
                          rgba(0, 0, 0, 0.5));
            background-repeat: repeat;
            background-size: 200px;
            background-position: center;
            background-color: #b5dc89;
        }

        .content {
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="content">
        <h1>GeeksforGeeks !</h1>
        <h1>Textured Background Example</h1>
        <p>
              This is an example of a textured background 
              created with CSS.
          </p>
    </div>
</body>
</html>

Description: In this example, we're using the same overlaying of a linear gradient from transparent to semi-transparent black to give it a more subtle effect. We've set the background-size to 200px to make the texture larger, background-position to center the texture, and background-color to light green to ensure the texture is visible even if the image doesn't load.