CSS Background Help

CSS Background Syntax


1. Set the background color of a page


Ans : body {
background-color:#color-code;
}


2. Set the background color of different elements

Ans. : h1
{
background-color:#color-code; // Set the background color of Heading 1
}
Same as another element like as
div
{
background-color:#color-code;
}

3. Set a image as the background of a page

Ans: body{
background-image:url('image.gif');}

4. How to repeat a background image only horizontally ?

Ans body{
background-image:url('image.gif');
background-repeat:repeat-x 'horizontally
background-repeat:repeat-y 'vertically
}

5. How to position a background image ?

Ans: body
{
background-image:url('image.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
6. How to fixed background image (this image will not scroll with the rest of page)

Ans: body
{
background-image:url('image.png');
background-repeat:no-repeat;
background-attachement:fixed;
}



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

background-color : the background color can be specified by :

1. name - a color name like 'green' example {background-color:red};
2. RGB - an RGB value, like RGB(255,0,0) example {background-color:RGB(255,0,0)};
3. Hex - A hex value like '#ff0000' example {background-color:#ff0000};

background-image : the background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

body {background-image:url('image.gif');}
Below is an example of a bad combination of text and background image. The text is almost not readable:

body {background-image:url('bgimage.jpg');}

Background Image - Repeat Horizontlly and Vertically

By default, the background image property repeats a image both horizontally and vertically.

body
{
background-image:url('image.gif');
background-repeat:repeat-x;
}

Background Image - Set position and no-repeat

When using a background image, use an image that does not disturb the text.
body
{
background-image:url('image.png');
background-repeat:no-repeat;
}

and also we want to change the position of image.
{

background-position:right top;
}

background-attachment Property

It specify a fixed background-image.

body
{
background-image:url('image.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

scroll:- the background image scrolls with the rest of the page. It is default.
fixed :- the background image is fixed.

another example of Fixed

#test {
background-image: url(./images/images.gif);
background-attachment: fixed;

height:200px;
width:300px;
overflow:scroll; }