149

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

Massimo Ugues
  • 4,373
  • 8
  • 43
  • 56

7 Answers7

277

just this as img tag is a content element

img {
    content:url(http://example.com/image.png);
}
Neuron
  • 5,141
  • 5
  • 38
  • 59
Marinos
  • 2,787
  • 2
  • 13
  • 2
81
#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
  • 5,141
  • 5
  • 38
  • 59
Ali Demirci
  • 5,302
  • 7
  • 39
  • 66
  • 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 – Marcelo 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
  • 616,129
  • 168
  • 910
  • 942
  • 5
    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
  • 1,023,142
  • 271
  • 3,287
  • 2,928
10

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
  • 37,635
  • 12
  • 69
  • 105
8

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,632
  • 2
  • 33
  • 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