CSS - Background Attachment


CSS - Background Attachment

  • The Background attachment property in CSS, will fix the image, even if we scroll down the image will be displayed. 

Sample Code :

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

        body{
            background-image: url("http://www.wikitechy.com/img/logo.png");
            background-repeat: no-repeat;
            background-attachment: fixed;
        }
    </style>
</head>
<body>
    <p>
Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
    <p>Welcome to WikiTechy.Try To Scroll Down</p>
</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.

    The background-attachment: fix; property will fix the background image in a fixed position in our browser window. Even if we scroll down the background image will be visible.

Output :


    Here, the background image wikitechy.com was displayed in the output.

    When we scroll down our mouse, the image wikitechy.com will be displayed as fixed position in the output browser window.