HOLLA TECH - LEARN

The background-attachment Property
 

The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
Even if an element has a scrolling mechanism, a “fixed” background doesn’t move with the element.

The CSS: 

body {
   background-image: url(“css_logo.png”);
   background-repeat: no-repeat;
   background-attachment: fixed;
}

 

Result: 

 


The background-attachment Values
 

You can also set the background-attachment to inherit or scroll.
When you set the background-attachment to inherit, it will inherit the value from its parent element.

When you set the background-attachment to scroll, the background image will scroll with the rest of the content.

The CSS:

body {
   background-image: url(“css_logo.png”);
   background-repeat: no-repeat;
  background-attachment: scroll;
}

 

Result: 

 

NOTE!
Copy and paste the line of codes in a text editor to play with the outputs. 

BACK NEXT

CLICK ON THE BUTTON BELOW TO GO TO THE CSS MAIN COURSE PAGE. 

CSS MAIN COURSE PAGE

 


© License: All Rights Reserved 


CONTACT HOLLA TECH – LEARN SUPPORT