How to Add a Background Image in CSS

The Three Ways to Set a Background Image

You add a background image to an HTML element using the background-image property in CSS. The image URL goes inside url(), like this: background-image: url('image.jpg'); You can point to an image file on your own server, a folder within your project, or a full web address.

The simplest approach is to add the property directly to a CSS rule for the element you want to change. If you want a background image on your entire page, you target the body tag. If you want it only on a specific section, you target that section's class or ID. You can also use shorthand with the background property, which lets you set the image, its size, and how it repeats all in one line.

The third option is to use CSS variables (also called custom properties), which is useful if you want to reuse the same image across multiple elements or change it later without editing every rule. You define the variable once at the top of your stylesheet, then reference it wherever you need it.

Key Takeaways

The background-image: url() property is the standard way to add an image, and the URL can point to a file in your project folder or anywhere on the web.
Use background-size: cover to make the image fill the entire element without stretching, or background-size: contain to fit the whole image inside without cropping.
The background-repeat property controls whether the image tiles across the element — set it to no-repeat if you want it to appear only once.
Combine background-position with your image to control where it sits within the element, using values like center, top left, or specific pixel measurements.
Always provide a fallback background color in case the image fails to load, using background-color alongside your image property.

Setting the Image Path Correctly

The URL inside url() must point to where your image actually lives. If your image file is in the same folder as your CSS file, write just the filename: url('photo.jpg') If the image is in a subfolder called images, write url('images/photo.jpg') If it is in a parent folder, use url('../photo.jpg') — each ../ moves up one level.

You can also use a full web address: url('https://example.com/images/photo.jpg') This works, but it means the image loads from someone else's server, which can be slower and may break if that server goes down. For images you control, keep them in your own project folder.

File paths are case-sensitive on most web servers, so Photo.jpg and photo.jpg are different files. Use lowercase names for all your image files to avoid confusion. If your path is wrong, the browser will not show an error — the background straightforward will not appear, which is why testing in your browser's developer tools matters.

Controlling Size and Fit with background-size

By default, a background image displays at its actual pixel size. If your image is 200 pixels wide and your element is 500 pixels wide, you will see the image once and then empty space. The background-size property fixes this by letting you stretch, shrink, or repeat the image to fill the space.

background-size: cover scales the image so it completely fills the element without leaving gaps. The image may get cropped on the sides or top and bottom if the element's shape does not match the image's shape. background-size: contain does the opposite — it scales the image to fit entirely inside the element, which means you might see empty space around it if the shapes do not match. background-size: 100% 100% stretches the image to fill the element exactly, but this can distort the image if the proportions are wrong.

You can also set a specific width and let the height adjust automatically: background-size: 300px auto scales the image to 300 pixels wide and keeps its natural height ratio. This is useful when you know how wide your element is but want the image to stay proportional.

Preventing Repetition and Positioning the Image

By default, a background image tiles (repeats) across the entire element if it is smaller than the space. Use background-repeat: no-repeat to show the image only once. You can also use background-repeat: repeat-x to tile horizontally only, or background-repeat: repeat-y to tile vertically only — this is useful for creating patterns like a vertical stripe or a horizontal line.

Once you have stopped the image from repeating, you control where it sits using background-position. The simplest values are keywords: background-position: center centers the image, background-position: top left puts it in the top-left corner, and background-position: bottom right puts it in the bottom-right corner. You can mix keywords: background-position: center bottom centers it horizontally and places it at the bottom.

For precise control, use pixel measurements 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 using percentages, which is useful because it stays centered even if the element resizes.

Using the Shorthand background Property

Instead of writing separate properties for image, size, position, and repeat, you can combine them into one background property. The order matters: image first, then position and size (separated by a slash), then repeat. Here is an example: background: url('photo.jpg') center / cover no-repeat; This sets the image, centers it, makes it cover the element, and stops it from repeating.

The shorthand is faster to write and easier to read once you get used to the order. If you only need to set the image and nothing else, you can use just background: url('photo.jpg'); and the other properties will use their defaults. You can still add background-color separately as a fallback — the shorthand does not override it.

Adding a Fallback Color and Handling Load Failures

Always pair your background image with a background-color that will show if the image fails to load. This might happen if the file path is wrong, the server is down, or the user's connection is slow. Write the color property on a separate line or include it in the shorthand: background: url('photo.jpg') center / cover no-repeat, #333; The color acts as a safety net so your page does not look broken.

Choose a color that works with your text. If your text is white, pick a dark color like #333 or #000 If your text is dark, pick a light color like #f0f0f0 or #fff This way, even if the image does not load, the page remains readable.

Test your background images in your browser's developer tools by opening the Network tab and watching what loads. If an image shows a red X or a broken icon, the path is wrong. If it loads but does not appear, check that your element has a width and height — a background image will not show on an element with zero dimensions.

Frequently Asked Questions

Can I use a background image and a background color at the same time?

Yes. The image displays on top of the color. If the image has transparent areas or fails to load, the color shows through. This is why setting a fallback color is important — it ensures your page looks intentional even if the image does not appear.

What image formats work best for background images?

JPG works well for photographs because it compresses large images into smaller files. PNG works for graphics and images that need transparency. WebP is newer and smaller than both, but older browsers do not support it. Use JPG or PNG unless you have a specific reason to use something else.

How do I make a background image responsive so it looks good on phones and desktops?

Use background-size: cover so the image always fills the element, and set the element's width and height using percentages or viewport units instead of fixed pixels. This way, the background scales with the screen size. You can also use media queries to swap different images for different screen sizes if needed.

Why is my background image not showing up?

Check three things: the file path is correct and uses forward slashes, the element has a width and height (background images do not show on zero-sized elements), and the image file actually exists in that location. Open your browser's developer tools, go to the Network tab, and reload the page — if the image shows a failed request, the path is wrong.

Can I layer multiple background images on the same element?

Yes, by separating them with commas in the background-image property: background-image: url('top.png'), url('bottom.jpg'); The first image appears on top, the second below it. This is useful for creating effects like a gradient overlay on top of a photo, though you can also use a real gradient property for that 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.