Background images
Introduction
While you have already learned how to add inline images, it is also possible to apply an image as the background of an HTML element.
The CSS property used for this purpose is background-image
and it accepts a value of a filename or link wrapped in url()
:
header {
background-image: url("avocado.png");
}
This would result in the following in your web browser:
💡 This example works because the header
element has text and an h1
inside of it. If you put a background image on an otherwise empty div
, you will need to also use additional CSS (like padding
or height
) to create space within the div
for the background image to show up.
Further customization
In addition to setting an image via background-image
, you also need to determine how this image should be positioned and behave within the element.
Firstly, do you want the image to repeat, like a background pattern? If so, you’re in luck because that is the default behavior of all background images.
However, if you don’t want that, you will also need to use the following CSS:
header {
background-repeat: no-repeat;
}
The background-size
property also affects how your image will fill the element it is applied to. By default, the image does not resize or scale to its container, but may be cut off or cropped by it. For example, in the demo above, the header
element is roughly 160 pixels tall, but the image is 440 pixels tall, so you do not see the whole image in the demo.
In addition to this default behavior, you can also scale a background image in two helpful ways:
contain
– This will scale the image as large as possible without cropping or stretching it.cover
– This will scale the image as large as possible and allow for the image to be cropped.
Finally, you can use a combination of background-position-x
to alter the starting position of a background image in the horizontal direction, background-position-y
to do the same vertically or the background-position
shorthand to do both.
The following interactive allows you to modify the background CSS properties on a div
to see the effects:
Important considerations
⚠️
Unlike inline images in your HTML which have alt
textFollowing and reading this link is optional.✳️
to provide screen reader users with details about your images (because you add alt
text to all relevant images, right?), background images have no such built-in feature. Which means if an image is meaningful and important to the web content, it should be an inline image (or be described using other means to those who use screen readers). CSS background image is appropriate for decorative images which do not provide special information or meaning.
If using background images, take the time to experiment with what your design looks like without them and consider if any significant information is being lost.
More detail
While the examples and demo above use keyword values for each of the properties, it is also possible to use more specific values (including pixel values and percentages) for both background-size
and background-position
.
👉🏻 I recommend sticking with the keyword values until you clearly understand how these properties work.
You can learn more about each of these properties by exploring the MDN docs:
-
background-image
Following and reading this link is optional.✳️ -
background-repeat
Following and reading this link is optional.✳️ -
background-size
Following and reading this link is optional.✳️ -
background-position-x
Following and reading this link is optional.✳️ -
background-position-y
Following and reading this link is optional.✳️ -
background-position
Following and reading this link is optional.✳️