CSS Background

CSS background properties are used to define the background effects of an element.

CSS properties used for background effects:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

Background Color.

Background color of the HTML page can be change using CSS. See the example below to change the color of the back ground.
body {background-color:#b0c4de}
You can give a different background color to different HTML element for e.g.

p{background-color:#rtggds;}
div{background-color:#0094fd;}
span{background-color:#000000;}

All the tag above have a different background.

Background Image:

You can also use image in the background using the following tag.
body {background-image:url(‘paper.gif’)}.

Background Image – repeat horizontal vertical

using css you can set the position of the background and also in which way it should repeat.
body
{
background-image:url(‘gradient2.png’);
background-repeat:repeat-x;
}

Background Image – Set position and no-repeat

you can also set the fix position of the background of HTML page and element using CSS
Example for the no repeat is mentioned below.

body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
}

Also you can fix the specify position of the background using the following code
body
{
background-image:url(‘img_tree.png’);
background-repeat:no-repeat;
background-position:top right;
}

using the above code and property of the background you can create stunning HTML with the optimized code.

  • Share/Bookmark