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"/>

Tested and working:

  • Chrome 14.0.835.163
  • Safari 4.0.5
  • Opera 10.6

Tested and Not working:

  • FireFox 40.0.2 (observing Developer Network Tools, you can see that the URL loads, but the image is not displayed)
  • Internet Explorer 11.0.9600.17905 (URL never loads)

Related Posts:

  1. Embed image in a
  2. Is element block level or inline level?
  3. How do I auto-resize an image to fit a ‘div’ container?
  4. CSS Display an Image Resized and Cropped
  5. How to place a text next to the picture?
  6. CSS: Moving the text down a few pixels but keeping the background still?
  7. Bootstrap 4 images thumbnail classes
  8. CSS: Moving the text down a few pixels but keeping the background still?
  9. Rotate an image in image source in html
  10. CSS Background image not loading
  11. How to “crop” a rectangular image into a square with CSS?
  12. CSS centred header image
  13. How to add image that is on my computer to a site in css or html?
  14. Half circle with CSS (border, outline only)
  15. Unblur content inside blurring background div
  16. Failed to load resource: the server responded with a status of 404 (Not Found) css
  17. CSS background-image-opacity?
  18. Resize image proportionally with CSS?
  19. Setting table column width
  20. What is difference between png8 and png24
  21. How to center an iframe horizontally?
  22. Can I have an onclick effect in CSS?
  23. How to style a checkbox using CSS
  24. forbidden 403 on image URLS
  25. CSS Background Image Not Displaying
  26. Fix footer to bottom of page
  27. How to position text over an image in css
  28. shifting a piece of text down using CSS
  29. Display Two
  30. Add border-bottom to table row
  31. Center form submit buttons HTML / CSS
  32. AngularJS ngClass conditional
  33. How to darken a background using CSS?
  34. How to use css first-child with :not()
  35. Programmatically change the src of an img tag
  36. How to draw diagonal lines with css
  37. How to display and hide a div with CSS?
  38. How to keep footer at bottom of screen [duplicate]
  39. Draw a line in a div
  40. Change Color of Fonts in DIV (CSS)
  42. Why is “cursor:pointer” effect in CSS not working
  43. a href link for entire div in HTML/CSS
  44. How do I set vertical space between list items?
  45. Check if an element contains a class in JavaScript?
  46. Complete list of reasons why a css file might not be working
  47. html div background image not showing up
  48. Bring element to front using CSS
  49. Brackets – Live Preview not working
  50. How to apply style classes to td elements?
  51. CSS set li indent
  52. how to overlap two div in css?
  53. Why does this CSS margin-top style not work?
  54. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  55. HTML list-style-type dash
  56. Bootstrap throws Uncaught Error: Bootstrap’s JavaScript requires jQuery
  57. How can I center a div within another div?
  58. How to align content of a div to the bottom
  59. How can I make my footer center to the bottom of the page?
  60. Remove scrollbar from iframe
  61. Why would max-width not work on this?
  62. Dynamic height of div with css
  63. Making text background transparent but not text itself
  64. Removing ul indentation with CSS
  65. How to center a navigation bar with CSS or HTML?
  66. Why write script type=”text/javascript” when the mime type is set by the server?
  67. My CSS won’t link to my HTML file
  68. Table fixed header and scrollable body
  69. How to make a div 100% height of the browser window
  70. css display table cell requires percentage width
  71. Why doesn’t min-height not work on my page?
  72. How to write a:hover in inline CSS?
  73. CSS Resize/Zoom-In effect on Image while keeping Dimensions
  74. How to draw a trapezium/trapezoid with css3?
  75. How can I change the Bootstrap default font family using font from Google?
  76. Add stroke around text – on the outside – with css?
  77. How to create a text box in PHP to output data
  78. Full Page < iframe >
  79. Alternate table row color using CSS?
  80. Change cursor to hand when mouse goes over a row in table
  81. CSS table td width – fixed, not flexible
  82. Set textarea width to 100% in bootstrap modal
  83. Can I apply a CSS style to an element name?
  84. CSS max-height not working
  85. How can I make a div not larger than its contents?
  86. Horizontal list items
  87. How to make Bootstrap Panel body with fixed height
  88. word-wrap break-word does not work in this example
  89. Change navbar text color Bootstrap
  90. Tooltip on image
  91. position fixed is not working
  92. Create a slanted edge to a div [duplicate]
  93. Removing whitespace between HTML elements when using line breaks
  94. Override USER AGENT STYLE SHEET – Chrome
  95. Place a button right aligned
  96. aking a flex item float right
  97. td widths, not working?
  98. How put links in wordpress dynamic sidebar?
  99. Using custom HTML tags to WordPress [closed]
  100. Main menu effect visited

Leave a Comment