sitemaxx.tr.gg
  HTML Background Image
 

HTML Background Image

This page contains HTML background image. Feel free to copy and paste the HTML background image into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

Background Image Code

This example code applies a background image to an HTML div tag using the background-image property. You can add a background image to any HTML element, such as a div tag, body tag etc.

Source Code Result
This div tag has got a background image. You could also apply a background image to the whole page if you like.

No-Repeat Image

You might notice that the above background image repeats across the whole width and height of its container. That is, if the container is larger than the image, the image will be re-drawn again and again until it fills the whole container.

Sometimes you might not want a background image to repeat like this. In this case, you'd need to add background-repeat:no-repeat to the CSS code (or its shorthand equivalent).

You can also specify where your image will be located by using the background-position property (or its shorthand equivalent). For example, background-position:bottom right;

Here's are two examples - explicit and shorthand:

Explicit Version

This version uses the explicit properties.

Source Code Result
This div tag has got a background image. You could also apply a background image to the whole page if you like.

Shorthand Version (Quicker)

This could be re-written using the background shorthand property, as follows: background:url('http://www.htmlcodes.me/images/backgrounds/background-image-3.gif') no-repeat bottom right;

Doing this saves you from typing out each specific property.

Source Code Result
This div tag has got a background image. You could also apply a background image to the whole page if you like.

Horizontal Repeat

You can also repeat the image vertically or horizontally. Again, this can be acheived with either the background-repeat property, or its shorthand equivalent. To repeat horizontally, use background-repeat:repeat-x, or just repeat-x in the shorthand version.

Here's an example using this background image:

Sample background image

Explicit Version

In this example, I also specify that the image be positioned at the bottom of the container. Therefore, I add this CSS code: background-position:bottom;

Source Code Result
This div tag has got a background image repeating horizontally. You could also apply a background image to the whole page if you like.

Shorthand Version

The shorthand version uses this code:background:url('http://www.htmlcodes.me/images/backgrounds/background-image-4.jpg') repeat-x bottom;

Source Code Result
This div tag has got a background image repeating horizontally. You could also apply a background image to the whole page if you like.

Vertical Repeat

To repeat vertically, use background-repeat:repeat-y or its shorthand equivalent. Again, to specify which side for the image to appear on, use background-position or shorthand equivalent.

Explicit Version

Source Code Result
This div tag has got a background image repeating vertically. You could also apply a background image to the whole page if you like.

Shorthand Version

Source Code Result
This div tag has got a background image repeating vertically. You could also apply a background image to the whole page if you like.
 
  sitemaxx.tr.gg  
 
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=