CSS - Background Repeat


CSS - Background Repeat

  • In CSS, Background-repeat property is used to control the repetition of an image in the background.

Sample Code :

<!DOCTYPE html>
<html>
<head>
    <style>

        body 
        {
            background-image: url("http://www.wikitechy.com/img/logo.png");
            background-repeat: repeat-x;
        }          
    </style>
</head>
<body>

    Welcome to Wikitechy! 
</body>
</html>

Code Explanation :

 

    The background-image property specifies an image to use as the background image for the element. URL specifies the location path of the background image.

    By using repeat property in CSS, we can avoid appearing of image several times in the output browser.

    Here we have the text Welcome to Wikitechy! which has been called inside the body tag (<body> </body>).

Note: We can also display image to appear several times in X and Y axis using repeat-x and repeat-y respectively in background repeat property. 

Output :

 

    The text “Welcome to Wikitechy!” was displayed in the browser window as shown.

    Here, the background image wikitechy.com was displayed in the output WITH NO REPEAT PROPERTY OF CSS.

 

    The text “Welcome to Wikitechy!” was displayed in the browser window as shown.

    Here, the background image wikitechy.com was displayed in the output WITH x-axis REPEAT PROPERTY OF CSS.


    The text “Welcome to Wikitechy!” was displayed in the browser window as shown.

    Here, the background image wikitechy.com was displayed in the output WITH y-axis REPEAT PROPERTY OF CSS.