Adding a Background image is easy, first you have to have an image that you like to appear on your web page. If you have decided on an image from the internet you must first download/save it to your computer. Once you have saved the image file apply to the CSS, along with the location of the file. It would be set up like this;

Body{
background-color:#000000
background-image: url(where you saved your image);}

->If it is from a website that has not been saved to your computer it should appear like so;
: url("http://www.image.com/image.gif");}

Repeat Background Image:
Your image will be set for the background, if you are looking for the image to repeat, you can use the "background-repeat" css.

To have an image repeat
Horizontally type “repeat-x”
Vertically type “repeat-y”
Both type "repeat"

Body{
background-color:#000000
background-image: url(where you saved your image);}
background-repeat: no-repeat;
}

Placing an Image
Normaly the image will be place in the upper left hand corner, if that is not the ideal postion you can use "background-position"
You can do so by using CM, %, or the basic top/right/center/bottom.

"background-position: bottom right --> bottom right of page
"background-position:7cm 7cm; -->7cm left & 7cm down
"background-position: 50% 20%; --> Centered and 20%down the page

Locking a Background Image
You can have your image scroll along with the viewer or stay fixed in its position. The CSS code would be "background-attachment" and would look like this,

background-attachment: fixed;
or
background-attachment: scroll;

End Product
body {
background-color: #336688;
background-image: url("URLfromweb OR filename");
background-repeat: no-repeat;
background-attachment: scroll;
}

Ref:
www.W3Schools.com -->This is a great website-->

 Create your own educational wiki!HelpPublic, not yet premium Privacy Policy RSS