CSS Content Attribute for Img Tag

content attribute of img elements

The content property as defined in CSS 2.1 applies to :before and :after pseudo-elements only. By CSS rules, you can specify any property for any element, but specifications have limitations on what properties “apply to” (i.e., have effect on) various elements.

The CSS3 Generated and Replaced Content Module, a Working Draft, describes the content property as applying to all elements. It has an example of replacing the content of an h1 element by an image, and surely the same could be done to an img element.

But it’s just a Working Draft. The usual resources on CSS implementation status, QuirksMode.org CSS info and Caniuse.com, do not indicate the situation; they only describe the support to content for :before and :after (which is rather universal except IE 7 and earlier.

CSS Content attribute for IMG tag

img is a replaced element, and the w3c CSS 2.1 spec says:

Note. This specification does not
fully define the interaction of
:before and :after with replaced
elements (such as IMG in HTML). This
will be defined in more detail in a
future specification.

I don't know about any "future specification" that took place. It does not work in Chrome, that's for sure :).

Use CSS to put img attributes

The answer is No. You can't manipulate the html tags with the help of css. Use javascript for that.

CSS is only used for manipulate the style attributes.

To change the height and width property using css you can do something like this

.img-dollar
{
   height:100px;
   width: 100px
}

Replace src of Image tag using css property

You can use content:url("image.jpg")

https://developer.mozilla.org/en-US/docs/Web/CSS/content

In your CSS,

.img {
    content:url("/new/image/source.png");
}

If you cannot modify HTML,

img {
    content:url("/new/image/source.png");
}

In HTML,

<img class="img"/>

I have not try this yet, but I not sure if the inline attribute src will overweight the CSS content.

Update

It should work if you already have src for your img element. Thanks @pol

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

Use content:url("image.jpg").

Full working solution (Live Demo):

<!doctype html>

<style>
.MyClass123{
    content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>

Use pseudo element's content attribute to change img

Since you can not apply pseudo elements on images the workaround for this is to use the figure tag

Note. This specification does not fully define the interaction of
:before and :after with replaced elements (such as IMG in HTML). This
will be defined in more detail in a future specification.

figure{    width: 200px;    height: 200px;    background: red;    position: relative;    margin: 0 auto}
figure:before{    content: '';    position: absolute;    top: 0;    left: 20px;    width: 100%;    height: 100%;    background: green}

<figure></figure>

Define an img's src attribute in CSS

#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;
}

image and text as value of content property

use :after and :before for add image and text.

look at this code:

jsFiddle

div{
    background:#999;
    width:100px;
    height:50px;
    position:relative;
}
div:after{
    content:"Text is here";
    background:#ddd;
    position:absolute;
    height:20px;
    width:100px;
    bottom:-20px;
    right:-20px;
}
div:before{
    content:url(http://lorempixel.com/20/20);
    background:#ddd;
    position:absolute;
    height:20px;
    width:20px;
    bottom:-20px;
    left:0px;
}