How to Add a Background Image in CSS

The three ways to set a background image with CSS

You add a background image to an HTML element using the background-image property in CSS. The most common syntax is background-image: url('path-to-image.jpg'); — you point to the image file, and the browser displays it behind your content. The image will tile (repeat) across the element by default, and you control that behavior with the background-repeat property.

There are three practical ways to do this. The first is writing the property directly in a <style> block in your HTML file. The second is linking to an external CSS file where you write the property. The third is using the shorthand background property, which lets you set the image, repeat behavior, position, and size all in one line. Most developers use the external file method because it keeps HTML and styling separate and makes changes easier to manage across multiple pages.

The path you use matters. If your CSS file and image are in the same folder, you write url('image.jpg'). If the image is in a subfolder called images, you write url('images/image.jpg'). If the image is in a parent folder, you write url('../image.jpg'). The browser will not display the image if the path is wrong, so checking your folder structure first saves debugging time.

Key Takeaways

The background-image property takes a URL to an image file in the format url('path/to/image.jpg'), and the path must match your actual folder structure.
By default, background images tile (repeat) across the element — use background-repeat: no-repeat; to display it once, or background-repeat: repeat-x; to repeat only horizontally.
The background-size property controls how large the image appears: cover fills the element and crops the image, contain fits the whole image inside, and 100% 100% stretches it to fill the space.
Use background-position to move the image within the element — common values are center, top left, or specific pixel measurements like 50px 100px.
The shorthand background property lets you set image, repeat, position, and size in one line, but writing them separately is clearer when you are learning.

Setting up the basic syntax with background-image

Open your CSS file or <style> block and select the element you want to style. If you are adding a background to the entire page, target the body selector. If you are adding it to a specific section, use a class or ID. Then write the property with the correct path to your image.

Here is a real example. If your HTML file is in a folder called my-website, your CSS is in my-website/styles.css, and your image is in my-website/images/sunset.jpg, your CSS would look like this:

body { background-image: url('images/sunset.jpg'); }

Save the file and reload your browser. If the image appears, your path is correct. If you see nothing, check that the filename matches exactly — capitalization matters, and a missing file extension like .jpg or .png is a common mistake. Use your browser's developer tools (right-click, then "Inspect") to see if the browser is reporting a 404 error, which means the file was not found.

Controlling how the image repeats and positions

By default, a background image tiles across the entire element like wallpaper. If your image is small or you want it to appear only once, use background-repeat to change that behavior. The most common values are no-repeat (display once), repeat-x (repeat horizontally only), repeat-y (repeat vertically only), and repeat (the default, tile in all directions).

Once you control the repeat, use background-position to move the image within the element. You can use keywords like center, top, bottom, left, and right, or combine them: top center, bottom right. You can also use pixel values or percentages: 50px 100px moves the image 50 pixels from the left and 100 pixels from the top.

body { background-image: url('images/sunset.jpg'); background-repeat: no-repeat; background-position: center; }

This example displays the image once, centered on the page. If you want it centered and covering the entire background, add background-size: cover; — the browser will scale the image to fill the space and crop any parts that do not fit.

Sizing the background image to fit your layout

The background-size property controls how large the image appears. The three most useful values are cover, contain, and a custom size like 100% 100% or 500px 300px.

background-size: cover; scales the image to fill the entire element, cropping parts of the image if necessary to avoid empty space. This is useful for hero images or full-page backgrounds where you want the image to always fill the space, even if the browser window is resized. background-size: contain; scales the image to fit entirely within the element without cropping, which means you might see empty space around it. Use this when you want the whole image visible.

background-size: 100% 100%; stretches the image to fill the element exactly, which can distort the image if the aspect ratio does not match. background-size: 500px 300px; sets a fixed width and height. You can also use one value: background-size: 50%; makes the image 50 percent of the element's width, and the height scales automatically to keep the aspect ratio.

.hero { background-image: url('images/banner.jpg'); background-size: cover; background-position: center; height: 400px; }

This creates a hero section that is 400 pixels tall, with the image filling it completely and centered. The image will scale up or down depending on the browser width, but it will always cover the space.

Using the shorthand background property

Instead of writing background-image, background-repeat, background-position, and background-size separately, you can combine them into one background property. The order is: image, repeat, position, size. Not all values are required — you can include only what you need.

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

This sets the image, tells it not to repeat, centers it, and makes it cover the entire background — all in one line. The forward slash separates the position from the size. If you omit the size, the browser uses the image's natural dimensions. If you omit the repeat, it defaults to repeat.

The shorthand is faster to write once you are comfortable with the syntax, but writing the properties separately is clearer when you are learning or when you need to adjust one value later without touching the others. Both approaches work equally well.

Fixing common problems with background images

The most common issue is the image not appearing at all. First, check the file path — open your browser's developer tools (right-click, select "Inspect"), go to the Console tab, and look for a 404 error with the image name. A 404 means the browser could not find the file. Verify that the filename, folder name, and file extension all match exactly, including capitalization.

The second common issue is the image appearing but looking stretched, squished, or cut off unexpectedly. This usually means background-size is set to 100% 100%, which distorts the image to fit the element's exact dimensions. Switch to cover or contain instead, or set a fixed size that matches the image's aspect ratio.

The third issue is the image tiling when you do not want it to. Add background-repeat: no-repeat; to display it once. If the image is repeating in only one direction, use background-repeat: repeat-x; or background-repeat: repeat-y; to control which direction.

If the image is positioned incorrectly, adjust background-position. Start with center to center it, or use top left, bottom right, and other keyword combinations. If you need precise control, use pixel values: background-position: 20px 50px; moves it 20 pixels from the left and 50 pixels from the top.

Frequently Asked Questions

Can I use a background image from a website instead of a local file?

Yes. Instead of a local path, use the full URL: background-image: url('https://example.com/image.jpg'); The image will load from that website. Be aware that if the website goes down or removes the image, your background will disappear. For production websites, it is safer to read the image and store it locally.

What image formats work for background images?

JPG, PNG, GIF, WebP, and SVG all work. JPG is best for photographs because it compresses well. PNG is best for images that need transparency or sharp graphics. WebP is newer and smaller than JPG, but older browsers do not support it. SVG works for logos and straightforward graphics and scales perfectly to any size.

How do I make a background image responsive on mobile?

Use background-size: cover; so the image scales to fill the screen on any device. Combine it with background-position: center; to keep the important part of the image visible. If the image looks too small on mobile, increase the element's height with a media query: @media (max-width: 600px) { body { height: 100vh; } }

Can I layer multiple background images on top of each other?

Yes. Separate multiple URLs with commas: background-image: url('image1.jpg'), url('image2.jpg'); The first image appears on top. This is useful for adding a semi-transparent overlay over a photo or combining a pattern with a solid color.

Why is my background image not showing in the browser?

Check three things: the file path is correct and matches your folder structure, the filename and extension are spelled exactly right (including capitalization), and the element has a height set (if the element is empty, it has no height and the background will not be visible). Use your browser's developer tools to confirm the file is loading without a 404 error.

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.