Background Position

By default a background image is tiled to fill the page or div but you can have the background image as a single row, column, or as a single image positioned where you want it.
The following is a list of the background properties and possible values

A typical shorhand version of the above would be

background:#000000 url(bgimage.jpg) no-repeat center center scroll;

To create a background that tiles horizontally in a single row.

background-image:url(bgimage.jpg);
background-repeat:repeat-x;

You can also add the position attribute to place the row.

background-image:url(bgimage.jpg);
background-repeat:repeat-x;
background-position:0 110;

To create a background that tiles vertically in a single column.

background-image:url(bgimage.jpg);
background-repeat:repeat-y;

You can also add the position attribute to place the column.

background-image:url(bgimage.jpg);
background-repeat:repeat-y;
background-position:210 0;

Position the image at x y.

background-image:url(bgimage.jpg);
background-repeat:no-repeat;
background-position:240 10;

Center the image.

background-image:url(bgimage.jpg);
background-repeat:no-repeat;
background-position:center center;

To create a watermark effect the image used should be opaque.

Fixed background in a scrolling div

Internet Explorer has a problem working with a single div so a work round for this is to nest a second div inside the first div and use the second div for the contents.

The rule for the first div contains the width, height, background attributes, and overflow which is set to hidden, otherwise gecko browsers will show two sets of scrollbars.

The width and height of the nested div are set to 100% and overflow auto is applied.

<style>
#div1a{
width:350px;
height:200px;
background-image:url(skull.gif);
background-repeat: no-repeat;
background-position: center center;
background-attachment:scroll;
overflow:hidden;
}

#div1b{
width:100%;
height:100%;
overflow:auto;
}
</style>
Example Text In A Div


Example Text In A Div


Example Text In A Div


Example Text In A Div


Example Text In A Div


Example Text In A Div


<div id="div1a">
<div id="div1b">Contents</div">
</div">

Center a background image in a table cell

The rule is applied to the td cell

<style>
#td1{
background-image:url(skull.gif);
background-repeat: no-repeat;
background-position: center center;
background-attachment:scroll;
overflow:auto
}
</style>

The rule is applied to the cell with the ID td1.

<TD id="td1">
Your Contents.
<TD> 		Cell Two
Cell Three Cell Three Cell Three Cell Three Cell Three


Cell Three Cell Three Cell Three Cell Three Cell Three


Cell Three Cell Three Cell Three Cell Three Cell Three


Cell Three Cell Three Cell Three Cell Three Cell Three
Cell Four

Fixed background in a scrolling cell

With regards to Internet Explorer, two divs are not required for this because we can use the td cell in place of the first div.
The rule that would be applied to the first div is applied to the td cell and the second rule to the div

<style>
#td1{
width:350px;
height:200px;
background-image:url(skull.gif);
background-repeat: no-repeat;
background-position: center center;
background-attachment:scroll;
}

#div1{
width:100%;
height:100%;
overflow:auto
}
</style>

<TD id="td1">
<div id="div1">
Your Contents.
</div>
<TD>		 Cell Two
Cell Three Cell Three Cell Three Cell Three


Cell Three Cell Three Cell Three Cell Three


Cell Three Cell Three Cell Three Cell Three


Cell Three Cell Three Cell Three Cell Three


Cell Three Cell Three Cell Three Cell Three


Cell Three Cell Three Cell Three Cell Three


Cell Four

IE6 may require the background-attachment to be fixed in this instance a conditional statement can be used

<!--[if IE6]>
background-attachment:fixed;
<![endif]-->

1) background:url(image.jpg);background-repeat:no-repeat ;background-position:119px 20px - Specific placement.

2) background:url(image.jpg) no-repeat fixed center center - Auto centers the image.