CSS: CSS Background - Learn CSS for Free and Fun

What we can do with CSS Background?

 We can set the background color
 We can set image as the background
 We can repeat a background image only vertically, only horizontally or display a background image only one time
 We can place the background image
 We can position a background image using % or pixels
 We can set a fixed background image

How CSS background is used?

Syntax: tag1 {background-color: color1;}

Example: body {background-color:cyan;}

CSS background enables to set the background color or the image. The image can be set as the
background of the webpage which can be repeated in vertical, horizontal form or in neither
direction. The CSS background is formulated in such a way that the background image can be
changed. Apart from this, the position of the background image can be changed by using % or
pixels or can be fixed. The CSS background helps to change the webpage on the basis of color,
gradient, image and other properties.

The webpage can be made more attractive by adding a color in the background. To change the
color of the background into cyan, the syntax added is body {background-color: cyan;}. Thus
the syntax remains same in case of any color only the shade of the color is to be replaced. The
syntax used is

<style type="text/css">
body {background-color: yellow;}
h1 {background-color: #00ff00;}
h2 {background-color: transparent;}
p {background-color: rgb(250,0,255);}
</style>

Similarly by adding image, the background can be made more attractive by using the syntax 

p {
background-image: url(image1.jpg);}.
<style type="text/css">
body {
background-image: url('bgdesert.jpg');
}
</style>

To repeat the background image the syntax used is

<style type="text/css">
body {
background-image:url('bgdesert.jpg');
background-repeat: repeat;
}
</style>

For the vertical repetition, the syntax used is

<style type="text/css">
body {
background-image:url('bgdesert.jpg');
background-repeat: repeat-y;
}
</style>

For horizontal repetition the syntax used is

<style type="text/css">
body {
background-image:url('bgdesert.jpg');
background-repeat: repeat-x;
}
</style>

To display the background image only once, the syntax used is

<style type="text/css">
body {
background-image: url('bgdesert.jpg');
background-repeat: no-repeat;
}
</style>

To place the background image the syntax used is

<style type="text/css">
body {
background-image: url('bgdesert.jpg');
background-repeat: no-repeat;
}
</style>

To change the position of the background image using %, the syntax used is

<style type="text/css">
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 30% 20%;
}
</style>

To change the position of the background image using pixel, the syntax used is

<style type="text/css">
body {
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-position: 50px 100px;
}
</style>

To set a fixed background image the syntax used is

<style type="text/css">
body {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
</style>