Overview
This lecture covers the CSS background-image property, explaining how to set background images on elements, use multiple images, relevant syntax, accessibility, and examples.
Purpose and Usage
- The
background-image CSS property sets one or more background images on an element.
- Multiple background images can be specified, separated by commas.
- Background images are layered, with the first image closest to the user.
- The element's borders are drawn above background images, and background color is beneath.
Syntax and Values
- Basic syntax:
background-image: url("image.png");
- Supports both image URLs and CSS gradients as values.
- Use
none as a value to indicate no background image.
- Multiple images:
background-image: url("img1.png"), url("img2.png");
- Global values:
inherit, initial, revert, unset are supported.
Accessibility Considerations
- Background images are not announced by screen readers, so do not use them to present important content.
- Always specify a
background-color as a fallback in case images fail to load.
- Ensure sufficient color contrast between background and text to meet accessibility guidelines (4.5:1 for body text).
Formal Definition and Syntax
- Initial value:
none.
- Applies to all elements, including
::first-letter and ::first-line pseudo-elements.
- Not inherited by default.
- Computed value resolves relative URLs to absolute.
- Animation type for this property is discrete.
Example: Layering Background Images
- Multiple images can be layered, such as a transparent star over a cat image.
- CSS example:
.class { background-image: url("star.png"), url("cat.png"); }
Related Properties and Functions
- Related properties:
background-attachment, background-clip, background-color, background-origin, background-position, background-repeat, background-size, background.
- Supports image-related CSS functions:
linear-gradient(), radial-gradient(), conic-gradient(), and their repeating variants.
Key Terms & Definitions
- background-image — CSS property for setting one or more background images on an element.
- none — keyword value indicating no background image.
- <image> — value type representing an image, such as a URL or gradient.
- Stacking context — the order in which layered images and backgrounds are drawn.
Action Items / Next Steps
- Practice using
background-image in CSS by setting single and multiple images.
- Always add a fallback
background-color when using images.
- Check color contrast using tools like the WebAIM Color Contrast Checker.
- Review related properties for comprehensive background styling.