CSS backgrounds

background-color

This property is used to set the background color of an element.

CSS snippet:


body{

background-color: #e1e1e1;  /*light gray color*/

}

Output:

The background color of the page changes into light gray color.

 

background-image

This property is used to set an image as the background for an element.

CSS snippet:


body{

background-image: url(“sample-image.jpg”);

}

 

Output:

The mentioned image is set as the background of the page.

 

background-repeat

If a background is specified, this property is used to specify how the image should be repeated.

 

Applicable values

repeat

the background image is repeated both horizontally and vertically

 

repeat-x

the background image is repeated horizontally only

 

repeat-y

the background image is repeated vertically only

 

no-repeat

the image will not be repeated.

CSS Snippet:


body{

background-image: url(“sample-image.jpg”);

background-repeat : repeat-x;

}

 

Output:

The background image will be repeated horizontally if the image width is lesser than the page width.

 

background-attachment

If a background is specified, this property is used to specify whether

the background image should be fixed to the viewport (ie., even if you scroll the container, the background will be fixed)

or

the background image should scroll along with the container.

Applicable values

scroll (default value)

the background image scrolls when the container block gets scrolled.

 

fixed

the background image will be fixed to the viewport and does not scrolls with the container block

CSS Snippet:


body{

background-image: url(“sample-image.jpg”);

background-repeat : repeat-x;

background-attachment : fixed;

}

 

Output:

Scroll the page down. The image will be fixed to the viewport.

Posted on July 12, 2014 in CSS

Share the Story

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top