Skip to content
Related Articles

Related Articles

Improve Article

How to create texture background using CSS ?

  • Last Updated : 18 Jun, 2020
Geek Week

Introduction: We can use CSS property to texture the background of 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 background including coloring the background, background images, etc. Background properties are background-color, background-image, background-position, background-attachment.

Approach of texturing the background: There are some steps for texturing the background using CSS with example and the explanation.

  • Create a html file using html tags.




    <html>
      
    <head>
        <title>
            Texture Background
            Using CSS 
        </title>
    </head>
    <body></body>
      
    </html>
  • Choose the texture color that we want to set in 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.




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

Example:




<!DOCTYPE>
<html>
  
<head>
    <title>
        Texture Background using CSS
    </title>
  
    <style>
        body {
            background-image: url(
            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:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :