Is it possible to set a src attribute of an img tag in CSS?

web-development

responsive-design

best-practices

css

byAnton Shumikhin·Feb 24, 2025

No, you can't set <img> src with CSS. But, you can use background-image for a workaround. Here's how:

.img-replace {
  background: url('new-pic.jpg') no-repeat center center; /* new "src" in town! */
  display: block;
  width: 100px; /* same old width */
  height: 100px; /* same old height */
}

<div class="img-replace"></div>

Meet your new <img> tag mimicked with CSS!

Making CSS Behave

CSS can't directly handle HTML content like the src attribute. But we can cheat a bit! There's the CSS content property, letting us project graphic elements. Watch out, though- it's not best buddies with all browsers!

.element:before {
  content: url('image.jpg'); /* CSS says: "let there be image!" */
}

Applying The Background-image Fix

What if you want to control image display via CSS? Say hello to the background-image property. It's your secret weapon for decorative images without altering HTML src.

.image-background {
  background-image: url('image.jpg'); /* CSS is at it again */
  background-size: cover; /* one-size-fits-all */
}

Reduce original <img> dimensions to 0px, and in comes your CSS-styled background image!

How Padding Can Help

Padding isn't just for comfort-of this, you can be sure! Padding-top assists you in maintaining the aspect ratio of background images. Quite handy for responsive design!

.responsive-background {
  padding-top: 56.25%; /* 16:9 TV-Frame, kind of trendy these days */
  background: url('image.jpg') no-repeat center center; /* CSS being stylish as always */
  background-size: cover; /* Making sure it covers all the bases */
}

Buttons In Disguise

Working with image buttons? <input type="image"> remains functional, and you can swap its visual representation with CSS:

input[type="image"] {
  width: 100px;
  height: 100px;
  background: url('newImage.jpg') no-repeat center center; /* Beauty clinic for buttons */
  border: none; /* Let the new beauty breathe */
}

Display Techniques Beyond Static Images

Sometimes, you need more than what meets the eye. SVG graphics, scripting with <canvas> and embedded media through the <object> tag are some adventurous routes. The <picture> element in HTML5.1 and upcoming CSS element() function hold promises for future.

Possibilities are endless but remember, every coding action might have repercussions:

SEO: Your hidden beauties might be invisible to search engines as well.
Print issues: CSS background images might play hide and seek in printouts.
Browser compatibility: Not all browsers appreciate your adventurous spirit.

Visual Illustration

Imagine an artist's easel (🎨), where we traditionally see a canvas and an image being painted directly onto it. Now envision that instead of painting, the artist wants to attach a photograph as the image:

Canvas (🖼️): [Your Image Here]
Photograph (📸): [Desired Picture]

Our artist decides to pin the photo:

🖼️📌📸: "Sorry, pins aren't allowed in this gallery! Use paint. 🚫🧷"
# CSS: a gallery with rules. No 'src' attribute pinning.

We learn that... CSS isn't a pin board, it's a palette for styles (🎨), not content (📸).

🚫📌🎨: Style with CSS. Content with HTML.

Relevant Resources

content - CSS: Cascading Style Sheets | MDN - more on CSS content property and playing it safe.
CSS background-image property - how to chart the background-image CSS landscape.
Stack Overflow discussion - For camaraderie in the quest for manipulating images with HTML and CSS.
CSS @ Ten: The Next Big Thing – A List Apart - Delving into the advanced realm of CSS, including image replacement methods.
The Image Replacement Museum | CSS-Tricks - CSS-Tricks - A time-capsule of past image replacement methods in CSS.
Smashing Magazine Tutorial - A hands-on experience of using :before and :after pseudo-elements in CSS.