The simplest way: use CSS in a style tag
Add a background image to your HTML page by writing a CSS rule that targets the body element. Open your HTML file, place a <style> tag inside the <head> section, and write the rule there. This method works on any page and requires no separate files beyond the image itself.
Here is the actual code:
<!DOCTYPE html> <html> <head> <style> body { background-image: url('image.jpg'); } </style> </head> <body> <h1>Your content here</h1> </body> </html>
Replace 'image.jpg' with the actual path to your image file. If the image is in the same folder as your HTML file, use just the filename. If it is in a subfolder called images, write 'images/image.jpg'.
Key Takeaways
- The background-image property in CSS is the standard way to add a background image to an HTML page.
- Place your CSS rule inside a <style> tag in the <head> section, or link to an external stylesheet using <link>.
- The image path must be correct relative to your HTML file's location, or the browser will not find the image.
- Use background-size: cover to make the image fill the entire page, and background-attachment: fixed to keep it in place when scrolling.
- Test your page in a browser to confirm the image loads before moving the files to a server.
Control how the image appears with additional properties
Once the image loads, you can adjust its behavior using other CSS properties. The most common ones are background-size, which controls whether the image stretches or repeats, and background-position, which controls where the image sits on the page.
Here is an example that makes the image cover the entire page without repeating:
body { background-image: url('image.jpg'); background-size: cover; background-repeat: no-repeat; }
Use background-size: cover to stretch the image to fill the entire viewport, even if it means cropping the edges. Use background-size: contain to fit the whole image on the page, even if it leaves empty space. Use background-repeat: no-repeat to show the image only once instead of tiling it across the page.
Keep the background fixed while content scrolls
By default, the background image scrolls along with the page content. If you want the image to stay in place while the user scrolls, add the background-attachment property and set it to fixed.
body { background-image: url('image.jpg'); background-size: cover; background-attachment: fixed; }
This creates a parallax effect where the background appears to move slower than the text. It works well for hero sections or full-page designs where you want the image to feel anchored to the viewport.
Use an external stylesheet instead of inline styles
For larger projects or multiple pages, move your CSS into a separate file instead of writing it inside the <style> tag. Create a file called style.css in the same folder as your HTML file, write your background rule there, and link to it from the <head> section.
In your HTML file, add this line inside the <head> tag:
<link rel="stylesheet" href="style.css">
Then in style.css, write:
body { background-image: url('image.jpg'); background-size: cover; }
This approach keeps your HTML cleaner and lets you reuse the same stylesheet across multiple pages. If you move the CSS file or the image file to a different folder, update the paths in the href and url() values to match.
Troubleshoot when the image does not appear
The most common reason a background image does not show is an incorrect file path. Open your browser's developer tools by pressing F12 or right-clicking and selecting Inspect. Look at the Console tab for error messages that mention the image file. If you see a 404 error, the browser could not find the file at the path you specified.
Check that the image file actually exists in the location you wrote in the url() value. If your HTML file is in a folder called project and your image is in a subfolder called images, the path should be url('images/image.jpg'), not url('image.jpg'). Also confirm that the filename matches exactly, including the file extension like .jpg, .png, or .gif.
If the path is correct but the image still does not appear, check that the image file is not corrupted. Try opening it in an image viewer on your computer. If it opens there, the file is fine and the problem is the CSS rule or the path. If the image does appear but looks stretched or cut off, adjust the background-size property to contain or a specific width and height like background-size: 100% 100%.
Add a fallback color in case the image fails to load
If the image file goes missing or the user's browser cannot load it for any reason, the page will have no background at all. Prevent this by adding a background-color property alongside your background-image rule. The color will show if the image fails to load.
body { background-color: #cccccc; background-image: url('image.jpg'); background-size: cover; }
Choose a color that matches the tone of your image or provides enough contrast with your text. Use a hex color code like #cccccc for gray, #ffffff for white, or #000000 for black. You can also use named colors like lightgray or navy.
Frequently Asked Questions
Can I add a background image to just one section of the page instead of the whole page?
Yes. Instead of targeting the body element, target a specific div or other container. For example, write .hero { background-image: url('image.jpg'); } and apply the class hero to the element you want the background on. The image will only appear behind that section.
What image formats work as background images?
The most common formats are JPG, PNG, GIF, and WebP. JPG works well for photographs and large images. PNG works well for images that need transparency. WebP is newer and produces smaller file sizes. All four work in modern browsers.
How do I make the background image responsive so it looks good on mobile phones?
Use background-size: cover to make the image scale with the screen size. The image will always fill the viewport, though parts may be cropped on smaller screens. If you want to show the entire image on all screen sizes, use background-size: contain instead, though this may leave empty space on larger screens.
Can I use a URL to an image hosted on another website?
Yes, but it is not recommended. Write the full URL in the url() value, like url('https://example.com/image.jpg'). The problem is that if the other website goes down or removes the image, your page will have no background. It is safer to download the image and store it on your own server.
How do I add multiple background images to the same page?
Use the background-image property with multiple url() values separated by commas. The first image appears on top, and each one below it shows through any transparent areas. For example: background-image: url('top.png'), url('bottom.jpg');