How to css background image

Content on WhatAnswers is provided "as is" for informational purposes. While we strive for accuracy, we make no guarantees. Content is AI-assisted and should not be used as professional advice.

Last updated: April 4, 2026

Quick Answer: To add a CSS background image, you use the `background-image` property within a CSS rule. You specify the image using the `url()` function, pointing to the image file's path. For instance, `background-image: url('path/to/your/image.jpg');`.

Key Facts

The `background-image` property is the primary CSS property for setting background images.
The `url()` function is used to reference the image file.
Background images can be repeated, sized, and positioned using other background properties like `background-repeat`, `background-size`, and `background-position`.
Best practice suggests using relative paths for image URLs to ensure portability.
Consider accessibility by ensuring text remains readable over the background image.

What is a CSS Background Image?

A CSS background image is an image that is displayed behind the content of an HTML element. Unlike foreground images inserted using the `` tag, background images are part of the element's styling and are controlled entirely by CSS. They can be applied to any HTML element, from the entire `` of a webpage to a small `

` or even a ``.

How to Set a CSS Background Image

The most fundamental CSS property for setting a background image is `background-image`. This property accepts a `url()` function, which contains the path to your image file. Here's the basic syntax:

.selector {background-image: url('path/to/your/image.jpg');}

Replace `.selector` with the HTML element you want to style (e.g., `body`, `div`, `.my-class`) and `'path/to/your/image.jpg'` with the actual path to your image file. The path can be relative (e.g., `'images/background.png'`) or absolute (e.g., `'https://www.example.com/images/background.png'`). Relative paths are generally preferred for easier website management.

Controlling Background Image Behavior

Simply setting a background image might not be enough. CSS provides several other properties to control how the background image appears and behaves:

`background-repeat`

By default, background images tile (repeat) both horizontally and vertically to fill the element. You can change this behavior:

`repeat` (default): Repeats the image in both directions.
`repeat-x`: Repeats the image horizontally only.
`repeat-y`: Repeats the image vertically only.
`no-repeat`: Prevents the image from repeating.

.no-repeat-background {background-image: url('pattern.png');background-repeat: no-repeat;}

`background-position`

This property determines the initial position of the background image when it's not repeating or when it's larger than the element. You can use keywords (like `top`, `bottom`, `left`, `right`, `center`) or length/percentage values.

Keywords: `background-position: center top;` (centers horizontally, aligns to the top vertically)
Values: `background-position: 50px 20%;` (50px from the left, 20% from the top)

.centered-background {background-image: url('logo.png');background-repeat: no-repeat;background-position: center center;}

`background-size`

This property controls the size of the background image. It's particularly useful for ensuring the image fits within the element or covers it entirely.

`auto` (default): The image retains its original size.
`cover`: Scales the image to be as large as possible so that the background area is completely covered by the image. Some parts of the image may not be visible in the background positioning area.
`contain`: Scales the image to be as large as possible without stretching the image. The entire image will fit inside the background area.
Specific values: You can provide width and height values (e.g., `background-size: 100px 50px;` or `background-size: 50% auto;`).

.cover-background {background-image: url('hero.jpg');background-size: cover;background-repeat: no-repeat;background-position: center center;}

`background-attachment`

This property determines whether the background image scrolls with the content or remains fixed:

`scroll` (default): The background image scrolls with the element's content.
`fixed`: The background image is fixed relative to the viewport. It doesn't move when the page is scrolled.
`local`: The background image scrolls with the element's contents, even if the element has a scrollbar.

.fixed-background {background-image: url('parallax.jpg');background-attachment: fixed;}

Shorthand `background` Property

For convenience, you can combine multiple background properties into a single `background` shorthand property. The order is generally flexible, but it's good practice to follow a common pattern:

.shorthand-example {background: url('image.png') no-repeat center center / cover;}/* Order: image | repeat | position | size */

Note that `background-attachment` is usually placed after `background-position` and before `background-size` if not using the shorthand, or it can be included in the shorthand in specific orders.

Best Practices and Considerations

Image Optimization: Use optimized image formats (like WebP, JPG, PNG) and compress them to reduce file size for faster loading times.
Relative Paths: Use relative paths for your image URLs. This makes your website easier to move or deploy to different servers.
Fallback Color: Always provide a `background-color` as a fallback. If the image fails to load, the background color will be displayed, preventing a blank space.
Accessibility: Ensure sufficient contrast between text and the background image. If the background image is complex or has varying colors, consider adding a semi-transparent overlay or using a more subdued background image.
Responsiveness: Use `background-size: cover;` or `background-size: contain;` along with `background-position` to make your background images adapt well to different screen sizes.

By mastering these CSS properties, you can effectively use background images to enhance the visual appeal and user experience of your web pages.