Applying Background Images with CSS

Background images are a powerful way to enhance the visual design of your website. They can be applied to almost any HTML element using the CSS background-image property.

Background Image on an HTML Element

To add a background image to a specific element, like a paragraph or a div, you can use the inline style attribute.

This paragraph has a background image applied to it.

Alternatively, you can define the style in the <style> section of your document for better organization.

Background Image on a Page

To set a background image for the entire page, apply the background-image property to the <body> element.

Controlling Background Repetition

By default, if a background image is smaller than the element it's applied to, it will repeat both horizontally and vertically. To prevent this, use the background-repeat property.

Covering the Entire Element

If you want your background image to completely cover the element's area without losing its proportions, use background-size: cover. Combining this with background-attachment: fixed creates a parallax-like effect where the background image stays in place while you scroll.

Stretching the Background Image

To force the background image to stretch and fit the entire element, regardless of its original aspect ratio, you can set background-size to 100% 100%. Be aware that this can distort the image.

Learn More About CSS Backgrounds

The examples above demonstrate the basics of using background images. To master all the related properties, such as background-position and background-origin, check out our full CSS Background Tutorial.

HTML Background Images