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.
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.
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:
This version uses the explicit properties.
This could be re-written using the background
shorthand property, as follows:
background:url('https://pustudy.com/images/backgrounds/background-image-2.gif') no-repeat bottom right;
Doing this saves you from typing out each specific property.
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:
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;
The shorthand version uses this code:background:url('https://pustudy.com/images/backgrounds/background-image-2.gif') repeat-x bottom;
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.