137

I need to define an <img>'s src attribute in CSS. Is there a way to specify this attribute?

Massimo Ugues
  • 4,197
  • 7
  • 40
  • 56

7 Answers7

248

just this as img tag is a content element

img {
    content:url(http://example.com/image.png);
}
Neuron - Freedom for Ukraine
  • 4,303
  • 4
  • 29
  • 51
Marinos
  • 2,497
  • 2
  • 11
  • 2
79
#divID {
    background-image: url("http://imageurlhere.com");
    background-repeat: no-repeat;
    width: auto; /*or your image's width*/
    height: auto; /*or your image's height*/
    margin: 0;
    padding: 0;
}
Neuron - Freedom for Ukraine
  • 4,303
  • 4
  • 29
  • 51
Ali Demirci
  • 5,185
  • 6
  • 35
  • 62
  • 2
    @zipcodeman : That's too bad. There are some limitations to the `background-image:` method. Like, you have no control over the dimensions of the image. You can make the image space bigger, of course, just not the actual image. – TARKUS Nov 25 '13 at 18:37
  • 4
    @GregoryLewis I think this is better: http://stackoverflow.com/questions/2182716/how-can-we-specify-src-attribute-of-img-tag-in-css – mila Dec 11 '14 at 13:21
  • 2
    @zipcodeman - You can change the size of the image this way by using `background-size:cover`, and then changing the height and width. – Lee Oct 28 '15 at 15:15
  • 2
    Today, 2017 year, `background-image` is not the solution. Making this, I have 2 images – Alex Aug 25 '17 at 02:27
51

No there isn't. You can specify a background image but that's not the same thing.

cletus
  • 599,013
  • 161
  • 897
  • 938
  • 4
    Indeed. `` represents a content image. If the image isn't content then it shouldn't be an `` element. If it is content, then it should be. If the content is duplicated on multiple pages (such as being part of a menu) then the HTML for it should be too (e.g. using a template system) just like any other duplicated content. – Quentin Apr 20 '10 at 15:36
13

CSS is not used to define values to DOM element attributes, javascript would be more suitable for this.

Darin Dimitrov
  • 994,864
  • 265
  • 3,241
  • 2,902
9

No. The closest you can get is setting a background image:

<div id="myimage"></div>

#myimage {
  width: 20px;
  height: 20px;
  background: white url(myimage.gif) no-repeat;
}
RoToRa
  • 36,594
  • 12
  • 66
  • 103
7

After trying these solutions I still wasn't satisfied but I found a solution in this article and it works in Chrome, Firefox, Opera, Safari, IE8+

#divId {

  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */

}
Eric
  • 3,522
  • 2
  • 31
  • 28
  • 1
    I was about to post the same article, it works perfectly for me, and I have to support IE on my site. if it works for IE... – Rafiki Mar 13 '15 at 11:58
2

They are right. IMG is a content element and CSS is about design. But, how about when you use some content elements or properties for design purposes? I have IMG across my web pages that must change if i change the style (the CSS).

Well this is a solution for defining IMG presentation (no really the image) in CSS style.
1: create a 1x1 transparent gif or png.
2: Assign propery "src" of IMG to that image.
3: Define final presentation with "background-image" in the CSS style.

It works like a charm :)

Frank
  • 161
  • 1
  • 2