Background-attachment Property in CSS3

How to set the fixed background image on the webpage in CSS3?

By using background-attachment property we can set the fixed background image on the webpage.

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

<body>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
    <p>TechFunda.com</p>
</body>

In the above code snippet we have given value "fixed" to the background-attachment property. So that the backgrounda-image will be constant on the webpage. If we scroll with the mouse on the webpage, the content on the webpage moves and the background-image is constatnt.

OUTPUT

Views: 3605 | Post Order: 45

CSS3 > Background

Background-attachment Property in CSS3

How to set the fixed background image on the webpage in CSS3?

Related Posts

Utility Tools