Menu
Is it possible to set the src attribute value in CSS? At present, what I am doing is:
<img src="pathTo/myImage.jpg"/> and I want it to be something like this
<img class="myClass"/> .myClass { some-src-property: url("pathTo/myImage.jpg"); I want to do this without using the background or background-image: properties in CSS.
572
The <img> tag has two required attributes: src - Specifies the path to the image. alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed.
You can simulate having a src attribute by using the content attribute in CSS, and passing in the image path url() .
The required src attribute specifies the URL of an image. Note: The src property can be changed at any time. However, the new image inherits the height and width attributes of the original image, if not new height and width properties are specified.
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.
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"/>Tested and working:
Tested and Not working:
152
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
