background Attachment

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

CSS background Attachment Property


How to specify a fixed background-image:

body { 
    background-image: url('w3css.gif');
    background-repeat: no-repeat;
    background-attachment: fixed;


Definition and Usage

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.


CSS Syntax

background-attachment: scroll|fixed|local|initial|inherit;

Property Values

Value Description
scroll The background scrolls along with the element. This is default
fixed The background is fixed with regard to the viewport
local The background scrolls along with the element's contents
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples


How to create a simple parallax scrolling effect (create an illusion of 3D depth):

.fixed-bg {
    /* The background image */
    background-image: url("img_tree.gif");
    /* Set a specified height, or the minimum height for the background image */
    min-height: 500px;
    /* Set background image to fixed (don't scroll along with the page) */
    background-attachment: fixed;
    /* Center the background image */
    background-position: center;
    /* Set the background image to no repeat */
    background-repeat: no-repeat;
    /* Scale the background image to be as large as possible */
    background-size: cover;