How to Set a Background Image in HTML
The above example uses the
background-image property to set the background image.
You must supply the location of the image, either as an absolute URL or a relative URL. Like this:
Change myimage.png to the location of your image.
background shorthand property will allow you to add other background properties, such as color, background size, position, and more.
The original image in the above example looks like this:
So you will be able to see from the above example that the image is repeating, both vertically and horizontally. Background images automatically repeat unless otherwise specified.
If you don't want your image to repeat, see how to make a background image not repeat.
Putting Styles into an External Style Sheet
If you place the background image code into an external style sheet, here's a snippet of what that might look like:
Here's a snippet of what the HTML code could look like:
Adding the above external style sheet will set a background image against the
<body> element (which will typically result in the background image being applied to the whole page).
This example also sets a background image against a class that I called
.myBox. Now, any HTML element that uses that class will have the background image applied to it.