Background-position Property in CSS3

How to fix the position of a background image on the webpage in CSS3?

By using background-position property we can fix the position of a background image on the webpage.

<style>
        body {
            background-image: url("snitfunda.jpg");
            background-repeat: no-repeat;
            background-position: center;
            background-color: lightgreen;
            background-attachment:fixed;
        }
</style>

<body>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
    <p>I am an INDIAN</p>
</body>

In the above code snippet we have given the value "center" to the background-position property, so that the background image occupies the center position on the webpage.

OUTPUT

Views: 3271 | Post Order: 48

CSS3 > Background

Background-position Property in CSS3

How to fix the position of a background image on the webpage in CSS3?

Related Posts

Utility Tools