How to Set an Image in CSS ::before Using content() and background-image

Question

Adding an image with CSS ::before is a useful technique when you want to place an icon, decorative shape, badge, arrow, separator, or visual element before text or another HTML element without adding extra markup.

For example, you may want to add a small icon before a heading, place a decorative image before a card, show a badge before a button label, or create a background overlay using a pseudo-element. In all of these cases, the CSS ::before selector can help you keep your HTML clean while still adding visual design elements.

If you are searching for css before image, css before content image, or css image before, this guide will show you the best ways to do it with practical examples.

There are two common ways to set an image in CSS ::before:

Using content: url("image.png")
Using background-image: url("image.png")

Both methods work, but they are useful in different situations. The content: url() method is simple for small icons, while the background-image method gives you more control over size, position, repeat, responsiveness, and layout.

In this guide, we will cover both methods, explain when to use each one, and show how to fix common issues when your ::before image is not showing.

Quick Answer:

The most flexible way to add an image before an element is to use background-image on the ::before pseudo-element.

.element {
  position: relative;
}

.element::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8px;
}

Example HTML:

<p class="element">This text has an image before it.</p>

This method works well when you want to add an icon, small graphic, SVG, PNG, or decorative image before text.

The most important thing to remember is this:

content: "";

Without the content property, the ::before pseudo-element will not appear.

What Is CSS ::before?

The CSS ::before pseudo-element lets you insert content before the content of a selected HTML element. It does not require you to add a new HTML tag manually. Instead, CSS generates the extra visual layer for you.

For example:

.heading::before {
  content: "★";
}

This adds a star before the heading text.

You can also use ::before to add images, icons, shapes, overlays, labels, or background elements.

Example:

.heading::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("star-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 8px;
}

This is often better than adding extra HTML when the image is decorative and not important for SEO or accessibility.

When Should You Use an Image in CSS ::before?

Using a CSS image before an element is helpful when the image is decorative or part of the visual design.

You can use ::before images for:

Icons before headings
Icons before list items
Arrows before links
Decorative shapes before cards
Badges before buttons
Background overlays
Quote marks before testimonials
Step numbers or symbols
WordPress menu icons
Elementor heading icons
Gutenberg block decorations

For example, if you want a small arrow before a link, you do not need to add an extra <img> tag in the HTML. You can use CSS instead.

.read-more::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 6px;
}

However, if the image is important for meaning, SEO, or accessibility, use a normal HTML <img> tag with proper alt text instead.

Method 1: Add an Image in ::before Using content()

The simplest way to add an image in CSS ::before is by using the content property with url().

.icon-text::before {
  content: url("icon.png");
  margin-right: 8px;
}

Example HTML:

<p class="icon-text">Fast and simple setup</p>

This will add the image before the text.

This method is easy, but it gives you less control over the image size and layout. It works best for small icons that already have the correct dimensions.

Example: CSS before content image

The phrase css before content image usually means adding an image through the content property of the ::before pseudo-element.

Here is a simple example:

.notice::before {
  content: url("info-icon.svg");
  margin-right: 8px;
  vertical-align: middle;
}

<p class="notice">Important update available.</p>

This method is useful when you want a quick icon before text. But if you need to resize the image, center it, control its background behavior, or make it responsive, background-image is usually the better option.

Method 2: Add an Image in ::before Using background-image

The recommended method for most use cases is background-image.

.feature-title {
  position: relative;
  padding-left: 36px;
}

.feature-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  background-image: url("check-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
}

Example HTML:

<h3 class="feature-title">Easy customization</h3>

This method gives you more control because you can define:

Width
Height
Position
Background size
Background repeat
Background position
Hover effects
Responsive behavior
Z-index
Overlay style

For most CSS ::before image designs, background-image is the safer and more flexible option.

Ready to Make Your Visuals Interactive?Start using WP Before After Image Slider today

Content() vs background-image in CSS ::before

Both methods can add a CSS before image, but they are not the same.

Method	Best For	Control	Recommended Use
`content: url("image.png")`	Simple icons	Limited	Use for small inline images
`background-image: url("image.png")`	Icons, overlays, badges, decorative graphics	High	Best for most cases
HTML `<img>` tag	Meaningful images	High	Best for SEO and accessibility

Use content: url() when you want a quick image before text and the image does not need much styling.

Use background-image when you want better control over image size, spacing, alignment, and responsiveness.

Use an HTML <img> tag when the image is meaningful and users need to understand it.

How to Add an Icon Before Text with CSS

A very common use case is adding an icon before text. This works well for feature lists, service sections, pricing tables, buttons, and call-to-action blocks.

.icon-before {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-before::before {
  content: "";
  width: 20px;
  height: 20px;
  background-image: url("check.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

HTML:

<p class="icon-before">No coding knowledge required</p>

This approach keeps the icon aligned with the text and prevents the icon from shrinking on smaller screens.

How to Add an Image Before a Heading

You can also add an image before a heading using CSS ::before.

.section-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.section-heading::before {
  content: "";
  width: 32px;
  height: 32px;
  background-image: url("heading-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

HTML:

<h2 class="section-heading">Main Features</h2>

This is useful for blog sections, landing pages, documentation pages, SaaS feature blocks, and WordPress content sections.

How to Add a Background Shape Before an Element

The ::before pseudo-element can also be used to create a decorative background image behind or before a section.

.card {
  position: relative;
  overflow: hidden;
  padding: 40px;
  border-radius: 16px;
  background: #ffffff;
}

.card::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background-image: url("decorative-shape.svg");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.2;
  z-index: 0;
}

.card > * {
  position: relative;
  z-index: 1;
}

This technique is useful when you want to add visual depth without adding extra HTML.

How to Make a CSS ::before Image Responsive

If your image needs to adjust across different screen sizes, use responsive units such as clamp(), %, vw, or rem.

.responsive-icon::before {
  content: "";
  display: block;
  width: clamp(40px, 8vw, 120px);
  aspect-ratio: 1 / 1;
  background-image: url("responsive-shape.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

This makes the image flexible. It will not become too small on mobile or too large on desktop.

You can also use media queries:

.banner::before {
  content: "";
  display: block;
  width: 120px;
  height: 120px;
  background-image: url("banner-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .banner::before {
    width: 70px;
    height: 70px;
  }
}

This is helpful when you want the ::before image to look clean on mobile, tablet, and desktop.

How to Center an Image Inside ::before

To center a background image inside ::before, use background-position: center.

.box::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  background-image: url("icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

If you want to center the entire pseudo-element, you can use flexbox on the parent or absolute positioning.

.center-box {
  position: relative;
  min-height: 200px;
}

.center-box::before {
  content: "";
  position: absolute;
  width: 80px;
  height: 80px;
  top: 50%;
  left: 50%;
  background-image: url("icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translate(-50%, -50%);
}

This is useful for decorative icons, overlay elements, loading states, and card designs.

How to Add a Hover Effect to a ::before Image

You can also apply hover effects to images added with ::before.

.button-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s ease;
}

.button-icon::before {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url("arrow.svg");
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s ease;
}

.button-icon:hover::before {
  transform: translateX(4px);
}

This creates a small movement effect when users hover over the button or link.

You can also change the image on hover:

.download-link::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("download.svg");
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 8px;
}

.download-link:hover::before {
  background-image: url("download-hover.svg");
}

Why Is My CSS ::before Image Not Showing?

Sometimes the image does not appear even when the CSS looks correct. This usually happens because one required property is missing.

Here are the most common reasons:

Problem	Why It Happens	Fix
Missing `content`	`::before` will not render without content	Add `content: "";`
No width or height	The pseudo-element has no visible area	Add `width` and `height`
Missing display value	Inline pseudo-elements may not size properly	Use `display: inline-block` or `display: block`
Wrong image path	Browser cannot find the image	Check the image URL
Parent position issue	Absolute element appears in the wrong place	Add `position: relative` to the parent
Z-index issue	Image appears behind another element	Adjust `z-index`
Image is too large	The image overflows or gets cropped	Use `background-size: contain`
Image repeats	Background repeats by default	Add `background-repeat: no-repeat`

Here is a safe starter version:

.example {
  position: relative;
}

.example::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

If your CSS before image is not showing, start by checking content, display, width, height, and the image URL.

Common Mistake: Forgetting content:””

One of the most common mistakes is writing this:

.item::before {
  background-image: url("icon.svg");
  width: 20px;
  height: 20px;
}

This will not work because content is missing.

Correct version:

.item::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

Even if you are only using a background image, the content property is still required for ::before.

Common Mistake: Not Adding Width and Height

Another common mistake is adding background-image but not defining a size.

Wrong:

.label::before {
  content: "";
  background-image: url("icon.svg");
}

Correct:

.label::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

A background image needs a visible area. Without width and height, the image may not appear.

Common Mistake: Using the Wrong Image Path

If your image path is wrong, the pseudo-element may appear but the image will not load.

Example:

.icon::before {
  content: "";
  background-image: url("images/icon.svg");
}

Make sure the path is correct based on where your CSS file is located.

For WordPress, you may need to use the full image URL from the Media Library.

Example:

.wp-icon::before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  background-image: url("https://example.com/wp-content/uploads/icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
}

If you are using a theme or child theme, check whether your image path is relative to the CSS file or the website root.

Can You Use ::before on an Image Tag?

In most cases, you should not use ::before directly on an <img> tag. Image tags are replaced elements, and pseudo-elements like ::before may not work reliably on them.

Instead of this:

img::before {
  content: "";
}

Use a wrapper element:

<div class="image-wrapper">
  <img src="photo.jpg" alt="Product preview">
</div>

Then apply ::before to the wrapper:

.image-wrapper {
  position: relative;
  display: inline-block;
}

.image-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.image-wrapper img {
  display: block;
}

This method is better for overlays, badges, frames, and decorative effects.

How to Add an Image Before a WordPress Menu Item with CSS

You can use CSS ::before to add icons before WordPress menu items.

First, add a custom CSS class to your menu item from the WordPress menu settings. For example:

menu-icon-home

Then add this CSS:

.menu-icon-home > a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("https://example.com/wp-content/uploads/home-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8px;
  vertical-align: middle;
}

This will add an icon before the menu text.

You can repeat the same process for other menu items:

.menu-icon-contact > a::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("https://example.com/wp-content/uploads/contact-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8px;
}

This is a simple way to make your WordPress navigation more visual without editing theme files.

How to Add a CSS Image Before Text in WordPress Content

If you want to add an image before a paragraph, heading, or custom block in WordPress, assign a custom class to the block.

Example class:

custom-icon-text

Then add this CSS in Appearance > Customize > Additional CSS:

.custom-icon-text {
  display: flex;
  align-items: center;
  gap: 10px;
}

.custom-icon-text::before {
  content: "";
  width: 28px;
  height: 28px;
  background-image: url("https://example.com/wp-content/uploads/icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

This is useful for feature sections, notices, callout boxes, and service lists.

How to Use ::before Image in Elementor Custom CSS

Elementor users can add an image before a widget using custom CSS.

If you are using Elementor Pro, select the widget, go to Advanced > Custom CSS, and add:

selector {
  position: relative;
  padding-left: 36px;
}

selector::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 24px;
  height: 24px;
  background-image: url("https://example.com/wp-content/uploads/icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(-50%);
}

The selector keyword targets the current Elementor widget.

This works well for:

Headings
Buttons
Icon boxes
Text editor widgets
Call-to-action sections
Pricing table features

If the image is not showing, make sure your image URL is correct and the widget has enough space for the pseudo-element.

How to Add ::before Images in Gutenberg Blocks

In the WordPress block editor, you can add a custom CSS class to a block from the Advanced settings panel.

For example, add this class:

gutenberg-icon-heading

Then add this CSS:

.gutenberg-icon-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}

.gutenberg-icon-heading::before {
  content: "";
  width: 30px;
  height: 30px;
  background-image: url("https://example.com/wp-content/uploads/block-icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

This lets you add icons or small decorative images before Gutenberg headings, paragraphs, buttons, or group blocks.

How to Add an Overlay with CSS ::before

The ::before pseudo-element is also commonly used for image overlays.

Example:

<div class="hero-section">
  <h1>Beautiful Website Design</h1>
</div>

CSS:

.hero-section {
  position: relative;
  min-height: 420px;
  background-image: url("hero.jpg");
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  padding: 60px;
  color: #ffffff;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}

.hero-section > * {
  position: relative;
  z-index: 1;
}

This creates a dark overlay over the background image while keeping the text visible.

You can also use a gradient overlay:

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.1)
  );
}

This is useful for hero sections, banners, landing pages, featured images, and WordPress page headers.

How to Use SVG Images in CSS ::before

SVG icons work very well with ::before because they are sharp, lightweight, and scalable.

.svg-icon::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background-image: url("icon.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 8px;
}

SVG is often better than PNG for icons because it stays sharp on all screen sizes.

You can use SVG images for:

Check icons
Arrow icons
Social icons
Feature icons
Navigation icons
Decorative shapes

If you are using SVG in WordPress, make sure your site safely supports SVG uploads before using them in the Media Library.

How to Add an Image Before List Items

You can replace normal bullet points with custom image icons using ::before.

.custom-list {
  list-style: none;
  padding-left: 0;
}

.custom-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.custom-list li::before {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url("check.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin-top: 3px;
}

HTML:

<ul class="custom-list">
  <li>Easy to customize</li>
  <li>Works with modern browsers</li>
  <li>Useful for WordPress design</li>
</ul>

This is one of the most common uses of CSS ::before images.

How to Add an Image Before a Button

You can add an icon before a button using CSS.

.download-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 6px;
  background: #111827;
  color: #ffffff;
  text-decoration: none;
}

.download-button::before {
  content: "";
  width: 18px;
  height: 18px;
  background-image: url("download.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

HTML:

<a href="#" class="download-button">Download Now</a>

This keeps the button HTML clean while still adding a visual icon.

Is CSS ::before Image Good for SEO?

A CSS ::before image is not the best choice for important SEO images.

If the image is decorative, using CSS is fine. For example, icons, shapes, arrows, badges, and background graphics can be added with ::before.

But if the image is important to the content, use a normal HTML image tag:

<img src="product-before-after.jpg" alt="Before and after image comparison">

Use an HTML <img> tag when the image:

Explains important content
Needs alt text
Should be indexed as an image
Supports accessibility
Is part of the main article
Shows a product, result, screenshot, or tutorial step

Use CSS ::before when the image is decorative and does not need alt text.

Best Practices for Using Images in CSS ::before

Follow these best practices to keep your CSS clean and reliable.

1. Always Add content

.element::before {
  content: "";
}

Even if you are using background-image, the content property is required.

2. Define Width and Height

.element::before {
  width: 24px;
  height: 24px;
}

Without width and height, the image may not appear.

3. Use background-size

.element::before {
  background-size: contain;
}

Use contain when you want the full image to fit inside the pseudo-element.

Use cover when you want the image to fill the entire area.

4. Stop Background Repeating

.element::before {
  background-repeat: no-repeat;
}

This prevents the image from repeating.

5. Use SVG for Icons

SVG files are usually better for icons because they are scalable and lightweight.

6. Use HTML Images for Meaningful Content

If the image is important, use an <img> tag with alt text.

7. Test on Mobile

Always check your design on mobile because pseudo-elements may need different spacing or sizes on smaller screens.

Full Example: CSS Image Before Text

Here is a complete example of adding a CSS image before text.

<div class="feature-box">
  <h3>Fast Setup</h3>
  <p>Create a clean visual section with a CSS image before the heading.</p>
</div>

.feature-box {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
}

.feature-box h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
}

.feature-box h3::before {
  content: "";
  width: 28px;
  height: 28px;
  background-image: url("rocket.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

This is a practical example of the css image before technique. It places a decorative image before the heading without adding another image tag inside the HTML.

Bonus: When to Use a Before-After Image Slider Instead

CSS ::before is useful when you want to add a small decorative image, icon, overlay, or design element before content.

But if you want to compare two images, such as before and after photos, product changes, design improvements, photo edits, or visual transformations, a dedicated before-after image slider is a better option.

For WordPress users, a before-after image slider plugin can help you create interactive image comparisons without writing custom CSS or JavaScript.

Use CSS ::before for small design elements.

Use a before-after image slider when users need to compare two images interactively.

Don’t Just Show ImagesShow the Transformation with WP Before After Image Slider!

Download It Today!

Conclusion

Adding an image in CSS ::before is a simple and powerful way to improve your website design without adding extra HTML. You can use it to place icons before text, add decorative shapes, create overlays, style WordPress menus, improve Elementor widgets, and customize Gutenberg blocks.

For a quick image before text, content: url() can work. But for most real-world designs, background-image is the better choice because it gives you more control over width, height, positioning, responsiveness, and hover effects.

If your CSS before image is not showing, check the basics first: add content: "", set a display value, define width and height, confirm the image URL, and use background-repeat: no-repeat.

Use CSS ::before for decorative images and icons. Use a normal HTML <img> tag when the image is important for SEO, accessibility, or content meaning.