Background Image Code
You can add a background image to a web page or HTML element by using the CSS background-image
property or the background
property. One of the benefits of doing this is that you can still add content in front of the image (such as text and other elements). This content appears just as it normally would even if the background image wasn't there.
To use these properties, you apply them to the HTML element that you wish to add the background image to. For example, you could apply a background image to a <div>
element, like this:
Source Code | Result |
---|---|
This text appears in front of the background image.
|
"Repeating" Background Images
If the background image is smaller than the HTML element that it's applied to, it will "repeat" across the full width and height of the HTML element. In other words, instead of just appearing once, the background image will appear again and again until it uses up the full size of its parent container. Example below.
In this example, we set the <div>
element to be larger than the background image. The background image is 225 pixels wide and 151 pixels high. Let's make the parent container (i.e. the <div>
) 300 pixels wide and 200 pixels high.
Source Code | Result |
---|---|
This text appears in front of a repeating background image.
|
Background Pattern
Here's another example, this time using an image that's more suitable for being repeated.
Here's the image on it's own (without being repeated). This image is 137 pixels wide and 129 pixels high.
Now, let's use it as the background of an element that's 300 pixels wide by 200 pixels high.
Source Code | Result |
---|---|
This text appears in front of a repeating background image.
|
How Do I Stop It Repeating?
Many times, you might prefer that the image doesn't repeat. Perhaps you only want it to appear once as a background image. Easy!
To stop your background image from repeating, you can use the background-repeat
property along with the background-position
. Alternatively, you can just use the background
property to set all your background properties at once.
Source Code | Result |
---|---|
This text appears in front of a repeating background image.
|
Embedded Images
You can also have embedded images on your web page. These are images that are simply embedded into your web page as their own HTML element, as opposed to being a background of another element. See HTML Image Codes to embed an image into your web page.