CSS Background Image Code

CSS background images are particularly good at creating the obvious and the not so obvious effects. It all lies in the creativity of the web designer. Always when dealing with images, you want to keep the image size as small as possible. With a small background image you cant directly fill a web browser screen. Thanks to CSS this can be done through tiling or stretching. CSS allows you to tile horizontally, vertically, or in both directions. You can not to tile at all and even not scroll the image at all. The basic code for attaching a CSS background image is:

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

Whichever way you look at it all CSS background images either scroll with the web page or remain static on screen. An example of a static background is that used in Twitter with the clouds and the bird.

To achieve the effect here is the sample of the CSS background image code for a static background

body

{

background-image:url('myimage.gif');

background-repeat:no-repeat;

background-attachment:fixed;

background-position:right top;

}

while the short hand for the above CSS background image code is

body {background:#ffffff url('myimage.gif') no-repeat fixed right top;}

To allow the image to scroll with the page simply remove the "background-attachment" property and in the short hand version remove the occurrence of "fixed".

Tiled CSS background images are highly effective for filling web page canvasses. The reasoning for tiling CSS background images is either to have a desired pattern or to save of load times by using a light and small image that can easily be downloaded and tiled by the web browser. The CSS background Image code would look something like this:

For CSS background images that tile both horizontally and vertically you would simply use the following default CSS background image code.

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

To tile the image horizontally without repeating the image vertically, you would need to use a similar CSS background code with the property “repeat-x”.

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

To tile the image vertically this time instead of horizontally you would need to use a CSS background code with the property “repeat-y” that looks something like this.

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

To stop the image from repeating in either direction you will have to use the “no-repeat” property like in the following CSS background image code.

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

Some popular uses of CSS Background images positioning comes when designing online stationery. You may want an image to form a backdrop over your text and not necessarily be positioned on the top left of the canvass.

Another use would be for menu button effects where you can position an image based on whether it is the first menu item or the last menu item or center menu items like when you want the first menu item to have rounded left edges and the right menu item to have right rounded edges then you would need to position the image likewise.

The CSS background image code that handles positioning is as follows:

body

{

background-image:url('myimage.gif');

background-repeat:no-repeat;

background-attachment:fixed;

background-position:center;

}

In the above CSS Background image code snippet, I have used “center” as the example. Other properties are, left top, left center, left bottom, right top, right center, right bottom, center top, center center and center bottom. You can also use absolute coordinates to further control the CSS background image positioning, for example,

Position on the top right of the web page use:

background-position: right top;

Position the CSS background image in an absolute place use:

background-position: 200px 300px;

Where 200px is the offset from the left and 300px is offset from the top.

This positioning with absolute values can be used to produce effects like toggle buttons. Background Positioning is also popular for using with rating stars, where for example you could have the different ratings lined up vertically. then changing a rating would simply change the "y" offset of the image within the container.