How to Add a Background Image in CSS

The simplest way to add a background image

To add a background image to an HTML element using CSS, use the background-image property with the url() function. The most basic syntax looks like this:

background-image: url('path-to-your-image.jpg');

You can put this rule on any element — a div, the body tag, a button, or anything else. The image will display behind whatever content is already in that element. If the element is smaller than the image, the image gets cropped. If the element is larger, the image repeats by default.

The path to your image can be relative (pointing to a file in your project folder) or absolute (a full URL to an image anywhere on the web). For a file called background.jpg in the same folder as your CSS file, write url('background.jpg'). For a file in a subfolder called images, write url('images/background.jpg').

Key Takeaways

Use background-image: url('path-to-image') to add an image to any HTML element.
By default, background images repeat to fill the space — use background-repeat: no-repeat to stop this.
Control where the image sits with background-position and how it scales with background-size.
The shorthand property background lets you set color, image, repeat, position, and size all in one line.
Always provide a fallback background color in case the image fails to load.

Stopping the image from repeating

By default, a background image tiles — it repeats horizontally and vertically to fill the entire element. Most of the time you do not want this. To display the image only once, add background-repeat: no-repeat.

If you want the image to repeat only horizontally (left to right), use background-repeat: repeat-x. To repeat only vertically (top to bottom), use background-repeat: repeat-y. Here is a complete example:

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

Positioning and sizing the background image

Once you stop the image from repeating, you usually need to control where it sits. Use background-position to move it around. The most common values are keywords like top, center, bottom, left, and right. You can combine two keywords — for example, background-position: center top centers the image horizontally and places it at the top of the element.

You can also use pixel values or percentages. background-position: 50px 100px moves the image 50 pixels from the left and 100 pixels from the top. background-position: 50% 50% centers the image exactly.

To control how large the image appears, use background-size. The value cover scales the image to cover the entire element while keeping its original proportions — parts of the image may be hidden. The value contain scales the image to fit entirely inside the element — there may be empty space. You can also specify exact dimensions: background-size: 200px 150px makes the image 200 pixels wide and 150 pixels tall.

Here is a practical example that centers a single image and makes it fill the element:

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

Using the background shorthand property

Writing out background-image, background-repeat, background-position, and background-size separately takes up space. The background shorthand property lets you set all of them in a single line, in this order: color, image, repeat, position, size.

Not every value is required — you can skip any that you do not need. Here is an example that sets a fallback color, an image, and tells it not to repeat:

body { background: #f0f0f0 url('pattern.jpg') no-repeat; }

And here is one that includes position and size:

div { background: url('image.jpg') no-repeat center / cover; }

Notice the forward slash before cover — that separates the position from the size. This syntax is compact but can feel confusing at first. If you find it hard to read, there is no penalty for writing out each property on its own line.

Adding a fallback color

If a background image fails to load — because the file path is wrong, the server is down, or the user has a slow connection — the element will be invisible if you have not set a background color. Always include a fallback color that matches the mood of your design.

You can add the color separately or include it in the shorthand:

body { background-color: #e8e8e8; background-image: url('background.jpg'); }

Or in shorthand:

body { background: #e8e8e8 url('background.jpg') no-repeat center / cover; }

The color will show through if the image does not load, and it will not be visible if the image loads successfully.

Common mistakes and how to fix them

The most frequent error is a wrong file path. If your image does not appear, open your browser's developer tools (press F12 or right-click and select Inspect), go to the Console tab, and look for error messages. They often point to the exact problem — for example, "404 Not Found" means the file does not exist at that path.

Another common issue is forgetting to set a height on the element. If you add a background image to a div with no content, the div will have zero height and the image will not be visible. Add height: 300px (or whatever size you need) to the element.

If your image looks blurry or stretched, you probably need to adjust background-size. Use cover to fill the space without distortion, or contain to keep the whole image visible.

Using multiple background images

CSS allows you to layer multiple background images on a single element. Separate each image with a comma, and they will stack with the first image on top:

div { background-image: url('overlay.png'), url('base.jpg'); background-repeat: no-repeat, no-repeat; background-position: center, center; }

This technique is useful for adding a semi-transparent overlay on top of a photo, or layering textures. Each property value (repeat, position, size) applies to the images in the same order — the first value applies to the first image, the second value to the second image, and so on.

Frequently Asked Questions

Can I use a background image from a different website?

Yes, you can use the full URL: background-image: url('https://example.com/image.jpg'). However, the image must be publicly accessible, and the other website's server must allow cross-origin requests. If it does not, the image may fail to load silently.

Why is my background image not showing up?

Check three things: the file path is correct (use your browser's developer tools to see if there is a 404 error), the element has a height set (background images do not make elements taller), and the image file actually exists where you think it does. A fallback background color will help you spot the problem immediately.

How do I make a background image responsive?

Use background-size: cover to scale the image to fill the element at any screen size. Combine this with a responsive container — for example, a div that uses percentage widths or CSS Grid — and the background will adapt automatically.

What image formats work best for background images?

JPG works well for photographs, PNG for images with transparency or sharp edges, and WebP for smaller file sizes (though older browsers do not support it). Use your browser's developer tools to check how long the image takes to load — if it is slow, consider compressing it or using a smaller format.

Can I animate a background image?

You cannot animate the image itself with CSS alone, but you can animate the background-position property to create a scrolling or sliding effect. For more complex animations, use JavaScript or consider a video background instead.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.