Background-repeat Property in CSS3

How to repeat background image vertically and horizontally on the webpage in CSS3?

By using background-repeat property we can repeat the background image vertically and horizontally on the webpage.

<style>
        body {
            background-image: url("snitfunda.jpg");
            background-repeat: repeat-y;
             }
</style>

<body>
    <p>TechFunda.com</p>
    <p>DotNetFunda.com</p>
    <p>KidsFunda.com</p>
    <p>FarmingFunda.com</p>
    <p>ITFunda.com</p>
</body>

In the above code snippet we have given the value "repeat-y" to the background-repeat property, so that the image repeats vertically on the webpage. That is shown clearly in the below output.

OUTPUT

If we want to repeat the image horizontally, we can use the below code snippet.

<style>
        body {
            background-image: url("snitfunda.jpg");
            background-repeat: repeat-x;
             }
</style>

In the above code snippet we have given the value "repeat-x" to the background-repeat property, so that the image repeats horizontally on the webpage.

OUTPUT

Views: 3430 | Post Order: 49

CSS3 > Background

Background-repeat Property in CSS3

How to repeat background image vertically and horizontally on the webpage in CSS3?

Related Posts

Utility Tools