Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To add a background image to a website, write CSS—not HTML—using background-image or the background shorthand. For a full-width hero that fills its area, start with background: #f4f4f4 url("/images/background.jpg") center / cover no-repeat;. Put the image in a location your site can serve, and target the specific section you want styled rather than applying it to the whole page.
Basic HTML and CSS for a website background image
The phrase “HTML code” is common, but the background itself is controlled by CSS. HTML defines the page and its elements; CSS sets the decorative image behind an element’s content. In a reusable site, place the rule in an external stylesheet. The following example assumes the file is available at /images/background.jpg from your site’s root:
body {
background-image: url("/images/background.jpg");
background-color: #f4f4f4;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}Here is a minimal page that uses that stylesheet rule. Save the HTML as a page on your site and put the image at the matching path, or change the URL to the image’s actual location.
Recommended Free Tools
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Background image example</title>
<style>
body {
margin: 0;
min-height: 100vh;
background-image: url("/images/background.jpg");
background-color: #f4f4f4;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<main>
<h1>Welcome</h1>
<p>Page content goes here.</p>
</main>
</body>
</html>The min-height gives the body at least the height of the viewport in this example. More generally, an element needs a visible area for its background to show. Its content, padding, and layout determine that area; an empty section with no height may have no visible background area.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Use a background on one section instead of the whole page
For a banner, hero, or other section, apply the CSS to that section’s class. Give it enough height or padding to make the image area visible. A min-height is useful when the content may vary, while padding creates space around the content.
.hero {
min-height: 24rem;
padding: 3rem 1.5rem;
color: white;
background-color: #263746;
background-image: url("/images/hero.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}<section class="hero">
<h1>A heading over the background</h1>
<p>Supporting text belongs in the page, not in the image.</p>
</section>For a small demonstration, the declarations can go inside a page’s <style> element or an element’s style attribute. An external stylesheet is usually easier to reuse and maintain across pages. The CSS background shorthand can also combine the color, image, position, size, and repeat settings.
Choose how the image fits, sits, and repeats
There is no single sizing choice that suits every image and container. Choose based on whether filling the area or preserving the entire image matters more.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →| Setting | What it does | Useful when |
|---|---|---|
background-size: cover |
Scales the image until it covers the whole element; some edges may be cropped. | A hero or banner should have no uncovered gaps. |
background-size: contain |
Scales the whole image to fit inside the element; space may remain uncovered. | You need the full artwork visible and can accept empty space. |
background-position: center |
Centers the image within the background area. | The important subject is near the center. |
background-position: 70% center |
Shifts the image’s horizontal focal placement; adjust the percentage to suit the image. | The subject is off-center and a crop is cutting it off. |
background-repeat: no-repeat |
Prevents the image from tiling. | You intend to show one cover image. |
background-repeat: repeat |
Tiles the image in both directions. | You deliberately want a repeating texture or pattern. |
For the common single-image hero, the compact shorthand background: #263746 url("/images/hero.jpg") center / cover no-repeat; sets a fallback color, image, position, size, and repeat mode. The slash separates the position from the size. Use separate properties if you want each choice to be easier to read or change. The first image in a comma-separated background list is the top layer; a background color sits beneath the image layers. See MDN’s background-image reference for layer syntax and details.
Make the background work on mobile
If a background looks right on a desktop but appears cropped or misplaced on a phone, first check the container’s dimensions and the image composition. With cover, the image scales to fill the element, so a narrower viewport can crop different edges. That is expected behavior, not a guarantee that one setting will frame every screen the same way.
Rank #3
- Keep
background-size: coverwhen filling the area matters, then adjustbackground-positionto keep the important subject in view. - Try
containif showing the entire image matters more than filling every part of the section; provide a background color for any remaining space. - Check whether the section’s height, padding, or content changes at a narrow width. The background covers the element, not an abstract screen size.
- Test the result at the actual viewport sizes you support. If different layouts need different focal points, set a mobile-specific position in a media query, for example
@media (max-width: 600px) { .hero { background-position: 70% center; } }.
A reader asking about mobile resizing does not imply a universal fix: the right position and fit depend on the section and the image. The query is phrased as an individual question on Reddit, not a specification that one particular CSS value solves every case.
Set a fallback color and keep text readable
Set background-color even when the image is normally opaque. If the image cannot load, the browser treats it as though there were no image, leaving the color as a fallback. Choose a color that also keeps overlaid text legible in that failure case.
Free tools Windows power users keep installed
One-click scans. No signup required.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Check contrast against the visible parts of the actual image, not just an average or a convenient patch. MDN summarizes WCAG contrast thresholds of 4.5:1 for body text and 3:1 for large text. For this guidance, large text is at least 24px, or bold text at least 18.66px. Busy photographs can make contrast uneven, so use a suitable overlay or a solid backing behind text when needed. These figures are guidance cited by MDN; the page does not state a publication date for them.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Use CSS backgrounds only for decoration
A CSS background does not provide an image description to assistive technology. MDN puts it plainly: “Browsers do not provide any special information on background images to assistive technology.” Use a background for decoration, atmosphere, or visual styling—not to convey information a reader needs.
If the image communicates something important, include it as document content and provide an appropriate text alternative. For example, a meaningful diagram or product photo should be represented with an HTML image and suitable alternative text rather than hidden in CSS. The W3C’s C9 technique is specifically for decorative images and says it is not appropriate for images conveying information or functionality. If the image is content and needs to adapt to different devices, HTML responsive-image options are a separate approach; see MDN’s guide to responsive images.
Common background-image problems and fixes
- Nothing appears: Check the browser’s developer tools for a failed image request, verify the URL and filename (including capitalization), and confirm the server makes the file available at that path. Then check that the targeted element has a visible area.
- The image repeats: Add
background-repeat: no-repeatfor a single image. Repetition is the default behavior unless you set another value. - The image is cut off: Cropping is expected with
cover. Try changing the focal point withbackground-position, or usecontainif the full image must remain visible. - There are empty bands:
containcan leave part of the element uncovered. Set a suitable fallback color, or usecoverif cropping is acceptable. - The section’s background seems too short: Check the element’s content, padding, and height. The background covers the element’s area; it does not create extra height on its own.
- Text disappears on part of the photo: Recheck contrast across the full visible crop and add an overlay or solid backing where necessary. Also ensure the fallback color works if the file fails.
Check the finished page in a browser
After the CSS is in place, load the page at desktop and mobile viewport sizes and inspect the crop, focal point, and text readability. A screenshot can make differences between viewport sizes easier to compare. For a manual check, open the page in your browser’s responsive or device emulation mode and capture the relevant view.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteOr skip the browser setup
ScreenshotNeo can return a screenshot of a page from one GET request, which is useful when you want to check how the page and its background render without setting up a browser capture script. Replace https://your-site.example/page with the page you want to inspect. See the ScreenshotNeo documentation for the API parameters.
Quick Recap
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-site.example/page -o shot.webpScreenshotNeo is a website screenshot API and MCP server made by Yorker Media. It removes supported cookie and consent banners, newsletter popups, and chat widgets before capture; bot checks, blank pages, and failed loads are not billed. Its MCP server lets AI agents use screenshot tools, and the free plan includes 1,000 screenshots per month with no card required; paid plans start at $5 for 3,000. Try it by signing up for ScreenshotNeo.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
