HTML Background Image
This page contains HTML background image. Feel free to copy and paste the HTML background image into your own website, blog, or other HTML document. And feel free to modify the code as you wish.
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('/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:
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('/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.
|