Create Backgrounds for your HTML Pages

Create Backgrounds for your HTML Pages

Create Backgrounds for your HTML Pages

You can apply creative background graphics to your whole web page, or to respective content containers on your page in the same way. The following demonstrations with code examples should give you a good start in understanding background placement and tiling from a web designer's standpoint.

Fast Loading Strips and Tiles

Example 1 - Centered Image Strip that repeats vertically

body {
background-image: url(myBG.jpg);
background-position:center;
background-repeat: repeat-y;
background-attachment:scroll; 
}

Example 2 - Image Strip that repeats horizontally

body {
background-image: url(myBG.jpg);
background-repeat: repeat-x;
background-attachment:scroll;
background-color:#000000;
}

Example 3 - Repeating Tiles

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

Full Image Backgrounds

Example 1 - Centered custom large image background( these take slightly longer to load but can be more fun and creative )

body {
background-image: url(myBG.jpg);
background-position:center top;
background-repeat:no-repeat;
background-attachment:scroll;
background-color:#FFFFFF; 
}

click here to code. 

Tweet