Backgound Images in CSS

Written By:-Avinash Malhotra

Our Website:- Tech Altum

Lets see how an image comes in background? 

Lets have a div with width 100%, height:500px and background:url(http://techaltum.com/images/01.jpg);
We will see following results;

Div with 
width:653px; 
height:400px; 
and background image as shown.

But as we can see that the image does'nt fit in the div.
Actually image size is lesser than div size.
So we need to customize both width and height of image according to the div size.


Various other properties of background are:

Background-repeat:
It has following value:

1. Repeat-x; Background will repeat only in X axis, means horizontally .
2. Repeat-y; Background will repeat only in Y axis, mean vertically.
3. no-repeat; background image will never repeat. will show its actual size only once.

Background-attachment:
It has following value:

1. scroll; which is by default.
2. fixed; background image will nor scroll, but content will. 

         See example of background fixed, click here.