Change the background of your webpage

The background-image property can be used to specify a background image your page. For example, to set a background image for your page, you would use something like this where image_url would be the url of the image you would like to use for your background:

note: using the "background-attachment: fixed" property makes it possible for the background to stay fixed in the same place on the screen while the page scrolls:

<style type="text/css">

body{background-image:url("image_url");
background-attachment:fixed;}

</style>


More background properties:

Just add these properties between the existing <style> </style> tags:

Specifying how the background image tiles:

background-repeat: repeat

Default setting. Tiles the background image both horizontally and vertically.

background-repeat: repeat-x

Tiles the background image in the horizontal direction only. Use if you want the background running across the top of the page.

background-repeat: repeat-y

Tiles the background image in the vertical direction only. Use for left-hand page borders.

background-repeat: no-repeat

No repeating takes place. This displays only one copy of the image. Use if you want to use a large image that isn't designed to tile.

Positioning the background image

background-position: x% y%

Places the image x% across the page and y% down the page. Values of "0 0" indicate the top left hand corner.

background-position: x y

Places the image x units across the page and y units down the page. For example, "60px 35px" places the image 60 pixels to the right of the top left corner, and 35 pixels below it. You can use any CSS units to specify the position.

background-position: <position>

Positions the image using one of various positioning words. These are: top left, top center, top right, center left, center center, center right, bottom left, bottom center and bottom right.

Here's an example that results in a centered picture that will repeat vertically, with a blue background:

<style type="text/css">

table, td {
background-color:transparent;
border:none;
border-width:0;}

body {
background-color: #3300FF;
background-image: url('image_url');
background-repeat: repeat-y;
background-position: center;}

</style>

Colors Alphabetically Ordered

Common Hexadecimal Colors