Next-Gen App & Browser Testing Cloud

Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles

How to set a background image in HTML?

HTML itself has no background-image attribute. You set a background image with the CSS background-image property and point it at an image using url(). You can apply that CSS in three ways: as an inline style on the element, inside an internal <style> block, or in an external stylesheet. Pair it with properties like background-size, background-repeat, and background-position to control how the image fills the element.

body {
  background-image: url("background.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

HTML Has No Background-Image Attribute, You Use CSS

A common misconception is that you set a background by writing something like <body background="...">. That old HTML background attribute existed in early HTML, but it is obsolete and was removed from modern HTML. Browsers may still honor it for legacy pages, but you should never rely on it. The correct, future-proof approach is CSS.

With CSS, the background-image property accepts a url() value (an image file), a gradient, or even a comma-separated list of both. The element it is applied to acts as the canvas, so the element needs a visible width and height for the image to appear.

Method 1 - Inline style Attribute

The quickest way is to add a style attribute directly on the element. This is handy for a one-off test, but it mixes styling into your markup and cannot be reused, so avoid it in production code.

<!DOCTYPE html>
<html>
<body>
  <div style="background-image: url('banner.jpg');
              height: 300px;
              background-size: cover;">
    Hero section with an inline background image.
  </div>
</body>
</html>

Method 2 - Internal <style> Block

Moving the rules into a <style> block in the document head keeps the markup clean and lets you reuse a selector across elements. This is a common way to give the whole page a background by targeting the body.

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url("background.jpg");
      background-size: cover;
      background-position: center;
    }
  </style>
</head>
<body>
  <h1>Full-page background image</h1>
</body>
</html>

Method 3 - External Stylesheet

For real projects, keep CSS in a separate .css file linked from the head. This separates content from presentation, lets the browser cache the stylesheet, and keeps your background rules in one maintainable place. Note that url() paths in an external stylesheet are resolved relative to the CSS file, not the HTML page.

<!-- index.html -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

/* styles.css */
.hero {
  background-image: url("images/background.jpg");
  background-color: #1a1a2e; /* fallback if the image fails to load */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 400px;
}

Key CSS Background Properties

A background image is rarely used alone. These companion properties control how it scales, tiles, and positions itself inside the element.

Property	Purpose	Example
background-image	Sets the image, gradient, or layered list.	url("bg.jpg")
background-size	Scales the image: cover, contain, or explicit dimensions.	cover
background-repeat	Controls tiling of the image.	no-repeat
background-position	Anchors the image inside the element.	center
background-attachment	Fixes or scrolls the image with the page.	fixed
background-color	Fallback color shown if the image fails.	#1a1a2e

You can collapse all of these into the background shorthand. The values follow the order color, image, repeat, attachment, and position, and any value you omit falls back to its default.

/* Longhand */
.box {
  background-color: #ffffff;
  background-image: url("bg.png");
  background-repeat: no-repeat;
  background-position: right top;
}

/* Same result using the shorthand */
.box {
  background: #ffffff url("bg.png") no-repeat right top;
}

Make a Background Cover the Full Page

To create a full-bleed background that fills the viewport without tiling, apply the image to body and combine cover, no-repeat, and a center position. Adding background-attachment: fixed keeps the image still while the content scrolls over it.

body {
  background-image: url("hero.jpg");
  background-size: cover;       /* fills the screen, crops overflow */
  background-repeat: no-repeat; /* no tiling */
  background-position: center;  /* keep the focal point centered */
  background-attachment: fixed; /* parallax-style fixed image */
}

The difference between the two main scaling values matters here. cover scales the image until it completely fills the element, cropping whatever does not fit. contain scales the image until it fully fits inside the element, which can leave empty gaps if the aspect ratios differ. Use cover for hero sections and contain when the entire image must always be visible.

Multiple Background Images and Gradients

Because gradients are treated as images, you can use linear-gradient() or radial-gradient() directly in background-image. You can also stack several backgrounds with commas, where the first value in the list is painted on top. A popular pattern is overlaying a semi-transparent gradient on a photo to darken it for readable text.

.banner {
  /* gradient overlay on top, photo underneath */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("photo.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

Background Image vs img Tag (Accessibility)

Choosing between a CSS background and an HTML <img> element is not just stylistic, it has real accessibility consequences.

Decorative imagery: use a CSS background. Screen readers ignore CSS backgrounds, which is exactly what you want for purely visual decoration that adds no information.
Meaningful content: use a real <img> tag with a descriptive alt attribute. A CSS background cannot carry alt text, so any image conveying information must be an img element so assistive technology can announce it.
Text contrast: when text sits over a busy background image, add a solid or gradient overlay so the contrast ratio stays readable and meets accessibility guidelines.
Responsive note: for <img> elements use object-fit: cover to crop-to-fill, which is the img equivalent of background-size: cover used on backgrounds.

Test Background Rendering Across Browsers

Background images do not always render identically everywhere. background-attachment: fixed behaves inconsistently on iOS Safari, background-size: cover can crop differently on tall mobile viewports, and layered gradients may show subtle banding depending on the GPU and color profile. Verifying these on real browsers and devices is the only way to be sure your hero section looks right for every visitor.

You can check how your background-image, cover cropping, and gradient overlays render across 3,000+ browser and OS combinations using TestMu AI (Formerly LambdaTest)'sReal Time Browser Testing, which lets you load your page on real desktop and mobile browsers without any local setup.

Frequently Asked Questions

Does HTML have a background-image attribute?

No. HTML has no background-image attribute. The old HTML background attribute on body and table elements is obsolete and should not be used. Background images are set with the CSS background-image property, applied through an inline style, an internal style block, or an external stylesheet.

Why is my HTML background image not showing?

The most common causes are an incorrect file path in url(), a missing or misspelled file, the element having zero height so there is nothing to paint onto, or a relative path that does not resolve from the stylesheet's location. Verify the path, give the element a height, and set a background-color fallback that shows if the image fails to load.

How do I make a background image cover the whole page?

Apply the background-image to the body element and combine background-size: cover, background-repeat: no-repeat, and background-position: center. Add background-attachment: fixed if you want the image to stay still while the page scrolls. The cover value fills the viewport while preserving the image's aspect ratio, cropping the overflow.

What is the difference between background-size cover and contain?

cover scales the image so it completely fills the element, cropping whatever does not fit. contain scales the image so the entire image is visible inside the element, which can leave empty gaps if the aspect ratios differ. Use cover for full-bleed hero backgrounds and contain when the whole image must always be visible.

Can I use a gradient or multiple images as a background?

Yes. Gradients created with linear-gradient() or radial-gradient() are treated as images and can be used in background-image. You can also list several values separated by commas to stack multiple backgrounds, including a gradient layered over a url() image. The first value in the list is painted on top.

Should I use a CSS background or an HTML img tag for an image?

Use a CSS background for purely decorative imagery, because backgrounds are invisible to screen readers and cannot carry alt text. Use a real img element with a meaningful alt attribute when the image conveys content the user needs to understand. Mixing the two correctly is important for accessibility.