How to Add a Background Image to an HTML Page

The simplest way: the CSS background-image property

To add a background image to an HTML page, use the background-image property in CSS and point it to your image file. The most common approach is to write CSS in a style tag inside your HTML document's head section, or in a separate CSS file linked to your HTML.

Here is the basic syntax: add background-image: url('your-image.jpg'); to the CSS rule for the element you want to style. For a full-page background, target the body element. For a background on just one section, target that specific element by its class or ID.

The image path can be a relative path (pointing to a file in your project folder) or an absolute URL (pointing to an image hosted elsewhere on the web). If your image is in the same folder as your HTML file, write just the filename. If it is in a subfolder called images, write images/your-image.jpg.

Key Takeaways

Use background-image: url('filename.jpg'); in CSS to add an image as a background to any HTML element.
The background-size property controls how the image scales — use cover to fill the space or contain to fit the whole image without cropping.
Add background-repeat: no-repeat; to prevent the image from tiling across the page if it is smaller than the container.
Background images load after text and other content, so always include a fallback background color in case the image fails to load.

Controlling image size and repetition

By default, if your image is smaller than the element it is applied to, the browser will repeat (tile) the image to fill the space. To prevent this, add background-repeat: no-repeat; to your CSS rule.

To control how the image scales, use the background-size property. Set it to cover to make the image fill the entire element while maintaining its aspect ratio — some parts of the image may be cut off if the proportions do not match. Set it to contain to fit the entire image inside the element without cropping — there may be empty space around it. You can also specify an exact size, like background-size: 300px 200px; to make the image 300 pixels wide and 200 pixels tall.

For a full-page background that looks professional, use background-size: cover; combined with background-repeat: no-repeat; and background-attachment: fixed;. The fixed value keeps the image stationary while the page scrolls, creating a parallax effect.

A complete example for a full-page background

Here is a working example that sets a background image for the entire page:

<!DOCTYPE html> <html> <head> <style> body { background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-color: #cccccc; } </style> </head> <body> <h1>Welcome</h1> </body> </html>

The background-color property sets a fallback color that displays while the image loads or if the image file cannot be found. Choose a color that matches the tone of your image so the page does not look broken during the load.

Using background images on specific elements

You do not have to apply a background image to the entire page. You can add one to any HTML element — a div, a section, a button, or a heading. Target the element by its class name or ID in your CSS.

For example, to add a background image to a div with the class hero, write:

.hero { background-image: url('hero-image.jpg'); background-size: cover; width: 100%; height: 400px; }

You must set a width and height on the element, or it will collapse to zero height and the background will not be visible. Use pixels, percentages, or viewport units like 100vh (100% of the viewport height).

Linking to an external CSS file instead of inline styles

For larger projects, keep your CSS in a separate file rather than inside the HTML document. Create a file called style.css in your project folder and write your background-image rules there. Then link it in the head section of your HTML with a link tag:

<link rel="stylesheet" href="style.css">

This approach keeps your HTML cleaner and lets you reuse the same CSS file across multiple pages. If you change the background image later, you only have to edit one file.

Troubleshooting: image not showing

If your background image does not appear, check these common issues. First, verify the file path is correct — if the image is in a subfolder, include the folder name in the path. Second, make sure the image file actually exists and is not misspelled. Third, check that the element has a defined width and height — a background image on an element with no size will not be visible.

Open your browser's developer tools (press F12 or right-click and select Inspect) and look at the Network tab to see if the image file loaded successfully. If it shows a 404 error, the path is wrong. If the image loaded but still does not show, check that your CSS rule is actually targeting the right element and that no other CSS rule is overriding it.

Always include a background-color fallback so the page remains readable even if the image fails to load. This is especially important on slower connections where images may take time to download.

Frequently Asked Questions

Can I use a background image from another website?

Yes, you can point to any image URL on the web using the full web address: background-image: url('https://example.com/image.jpg');. However, the image must be publicly accessible and you should respect copyright — only use images you have permission to use. Hosting images on your own server is more reliable because you control when the image is available.

How do I make text readable over a background image?

Add a semi-transparent overlay or a dark background color to the text element itself. You can use background-color: rgba(0, 0, 0, 0.5); on a paragraph or heading to create a dark box with 50% transparency. Alternatively, use the text-shadow property to add a dark shadow behind the text, making it stand out against any background.

What image formats work best for backgrounds?

JPG files are best for photographs because they compress well and load quickly. PNG files work for images that need transparency. WebP is a newer format that offers better compression than both JPG and PNG, but older browsers may not support it. For best compatibility, use JPG or PNG and optimize the file size before uploading.

Can I use multiple background images on the same element?

Yes, you can layer multiple images by separating them with commas: background-image: url('image1.jpg'), url('image2.png');. The first image appears on top, and subsequent images appear behind it. This is useful for adding a pattern or texture over a photograph, or for creating complex visual effects.

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.