LESSON 4.1

Background vs. Embedded Images

Two different tools for two different jobs

Learn the key difference between HTML image tags and CSS background images, and how to choose the right one for any situation.

💡 The Concept

Two Ways to Display Images on the Web

Choosing between a CSS background image vs an img tag is one of the most practical decisions you make when adding visuals to a webpage. There are two ways to add images to websites. One way is with an HTML embedded image, and the other way is with CSS background images. Every image on a web page gets there in one of these two ways.

The Core Distinction: Content vs. Decoration

The golden rule: if the image is part of your content, use an HTML embedded image. If the image is part of your design, use a CSS background image.

A product photo on an e-commerce site? That is content — your visitors need to see it. A subtle texture behind your hero section? That is decoration. It enhances the design but does not convey essential information.

HTML Embedded Images

HTML images are added directly into your markup using the <img> element. They show up in the document flow, can be read by screen readers, and are indexed by search engines.

The code for an HTML embedded image looks like this:

<img src="images/cute-spider.jpg" height="300" width="600" alt="close up portrait of a cute spider">

CSS Background Images

Background images are applied through your stylesheet. They sit behind other content, do not appear in the HTML document flow, and are not read by screen readers. This makes them perfect for decorative visuals. Here is the basic syntax for a CSS background-image:

body {
    background-image: url(images/my-image.png);
}

Side-by-Side Comparison

Here is a quick reference to help you decide:

  HTML Embedded Images CSS Background Images
Added in HTML CSS
Best for Content images (photos, products, diagrams) Decorative images (textures, patterns, hero backgrounds)
Screen readers Yes, reads the alt text No. Invisible to assistive technology.
SEO Yes, indexed by search engines No. Not indexed.
Text overlay Generally not placed on top Text and elements are easily layered on top
Sizing control Set with height/width attributes Controlled with background-size, background-position, etc.

Visual Examples: Background or Embedded?

The rule is simple, but applying it takes practice. Here are three real images — for each one, consider which approach works best and why.

Example 1: Mountain Landscape

Mountain range: Should this be a background or an embedded image

This image makes an excellent CSS background. There is plenty of open sky where text can be placed without competing with the focal point of the photo. The mountains stay visible while the design works around them.

Mountain range used as a CSS background image with a text overlay

Tip: Use the text-shadow CSS property to keep text legible against complex or busy backgrounds.

Example 2: Coffee Shop Owners

Photo of coffee shop owners with text overlaid on their faces — a poor use of a background image

This image does NOT work as a CSS background. Placing text over faces looks unprofessional and makes the text hard to read. People are almost always content, not decoration. If you do need to place text on the image, make sure it is not placed on their faces.

Coffee shop owners displayed as an embedded HTML image alongside clean text

Better yet, se this as an HTML embedded image. The photo stays clean, the text is separate, and screen readers can describe the image to visually impaired visitors.

Example 3: Ladybug on a Flower

Photo of a ladybug on a flower with text overlaid on the photo

This one depends on context. If the page is about seasons or spring, the ladybug works beautifully as a CSS background — there is blurred area around the subject where text sits cleanly. If the page is about insects, use it as an embedded image so it gets proper alt text and search engine indexing.

Spring is Coming text placed beside a ladybug photo, not over the subject

❓ Frequently Asked Questions

Can I use a photo with people or animals as a hero background image?

Yes, but placement of your text matters a lot. The key is to find the open space in the composition — sky, blurred background, negative space to one side — and keep your text there. Avoid placing text over faces, eyes, or the main subject of the photo. A portrait with the person centered and filling the frame is very difficult to use as a background because there is nowhere for text to go without covering the subject. Photos that work well as backgrounds typically have the subject positioned to one side or in the lower portion of the frame, leaving a clear area for the headline. When working with a client photo that does not have natural open space, consider using a semi-transparent dark overlay on top of the image before adding the text — this can make almost any photo workable as a background.

What is background-size: cover and why is it used so often?

background-size: cover scales the image so it fills the entire container completely — no gaps, no stretching — by cropping the edges if needed. It is the standard choice for hero sections because it ensures the background always fills the screen regardless of the visitor’s device or window size. The tradeoff is that some parts of the image get cropped on different screen sizes. You can pair it with background-position to control which part of the image stays centered — for example, background-position: center top keeps the top of the image (often a face or focal point) visible while the bottom gets cropped on shorter viewports. Both of these properties are covered in an upcoming lesson.

Why can’t screen readers see background images?

Background images are CSS properties applied to elements, not HTML elements themselves. Assistive technology reads the HTML document structure — it has no mechanism to detect or describe what is painted on the page via CSS. This is actually by design: decorative images should not be announced to screen reader users because they add noise without meaning. It is one more reason the content-versus-decoration rule matters. If an image communicates something — a product, a person, a diagram — it belongs in the HTML as an <img> tag with descriptive alt text so everyone can access it.

Do background images hurt SEO?

They do not help it, because search engines cannot index CSS background images. Google Images only indexes <img> elements in the HTML. If the image is a product, a portfolio piece, an infographic, or anything you want to appear in image search results, it needs to be an embedded image with descriptive alt text. Background images are essentially invisible to search crawlers — which is fine for a decorative hero texture, but a missed opportunity if the image itself has value.

Is there a way to make a background image respond well on mobile without it looking cropped or strange?

A few techniques help. First, choose photos that have a clear focal point near the center — those crop gracefully at any aspect ratio. Second, use background-position: center center with background-size: cover so the image is always anchored to the middle. Third, for hero sections you can set a minimum height in CSS so the section does not collapse too short on small screens and cut off the image awkwardly. Some developers also use different images at different screen sizes with CSS media queries — a wider crop for desktop and a tighter, vertically oriented crop for mobile — to keep the focal point visible on every device.

★ Key Takeaways

Not all images belong in your HTML markup. This lesson explained when to use an embedded img tag versus a CSS background image, and what makes each one better for different situations. Next, you will learn how to organize your image files as part of a well-structured project. Good organization keeps your files manageable as projects grow.

Next Lesson: Organizing Your Image Files

← Back to Web Images Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons