We used the background image or color to make our website more attractive and delicious look for viewers.

We used the background color or image for any website page, article, or any paragraph to make it more attractive look.

To used of background image in CSS, We can easily put many types of values of images such as:

image()

1Linear _Gradient()

2Rail_Gradient()

3Repeating_Linear_Gradient()

4Repeating_Raial_Gradient()

5URL().

We discuss all about this breifly.

url()__________

In url,first we have to put the location of that image 

which we have to put in our CSS file. Now, the question arise how 

we find the location of image and put in CSS file? We briefly listen about this with example. First, we go to our PC ,select the image which we have 

to put and see that from which folder our image is save such as such as our image is saved in the image folder. 

We write the name of the image folder, forward slash and then the name of the image with their extension 

such as jbg , png. The image which you put in your pc may be in small size or large size and not fit in to your web page. If you want to adjust your image in full screen ,then you have to put another property

 of background image. Which is known as the background size.If just you 

want to cover the screen of the image then in size property you write as cover. So that , 

the image cover the screen. In background size property you can adjust the

 image standard size according to your wish such as 900 ,1500 width. After to put the standard size in CSS , the background image start to repeat in countinious manner. To avoid the repitition of our image , we used an another property of background image which is knowns as the repeat property of background. There are many values of repeat such as: no repeat; repeat_x; repeat-y; repeat;

if you want to adjust the image in left , right ,up or down .then we use the another property of the background image property Which is known as

the position property. Position of the image we can adjust as x.axis or y.axis.

EXAMPLE:

In this example we use two images in our web page.

background_image:url("folder name/picture name.extesion") ,url("folder name/picture name.extesion");

backdround-repeat: no_repeat;

background-size:500px;

background-position:0px 0px, 500px, 0px;// as we take the size of image is 500px so that the second image

go forward to the 500px on X.axia.

}

</body>