backgroundImage

Background-image is a CSS property that specifies one or more images to be drawn as the background of an element. The images are painted in the element's background layer, beneath its content and background-color. The property does not participate in layout or the accessibility of the content by itself.

Syntax and values: background-image: <image>; values can be a single image or a comma-separated list of images for layered backgrounds. Each value can be a URL via the url('image.png') function or a gradient built with linear-gradient, radial-gradient, or conic-gradient. A value of none removes any background image. When multiple values are provided, they are stacked with the first value on top of the others. The property is typically used in conjunction with background-position, background-size, background-repeat, and background-attachment to control how the image is displayed.

Usage and considerations: The background image can be decorative or informative; for accessibility, avoid conveying essential information solely through background-image and provide text alternatives or other accessible cues as needed. For responsive design, combine with background-size: cover or contain and use media queries or alternate images for different viewport sizes. Image file choices should consider file size, format, and browser support to balance visual quality and performance.

Example: .hero { background-image: url('hero.jpg'), linear-gradient(to bottom, rgba(0,0,0,.6), rgba(0,0,0,.0)); background-size: cover; background-position: center; background-repeat: no-repeat; }