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

Question

Is it possible to set the src attribute value in CSS  At present  what I am doing is    lt img src  pathTo myImage jpg   gt    and I want it to be something like this   lt img class  myClass   gt     myClass       some-src-property  url  pathTo myImage jpg      I want to do this without using the background or background-image  properties in CSS

User · Answer

Or you could do this which I found on the interweb thingy.

https://robau.wordpress.com/2012/04/20/override-image-src-in-css/

<img src="linkToImage.jpg" class="egg">

.egg {
  width: 100%;
  height: 0;
  padding: 0 0 200px 0;
  background-image: url(linkToImage.jpg);
  background-size: cover;
}

So effectively hiding the image and padding down the background. Oh what a hack but if you want an IMG tag with alt text and a background that can scale without using JavaScript?

In a project I'm working on now I created a hero block twig template

<div class="hero">
  <img class="image" src="{{ bgImageSrc }}"
       alt="{{ altText }}" style="background-image: url({{ bgImageSrc }});">
</div>

User · Answer

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    create a 1x1 transparent gif or png  Assign propery  src  of IMG to that image  Define final presentation with  background-image  in the CSS style    It works like a charm

User · Answer

I would add this  background image could be also positioned with background-position  x y   x horizontal y vertical        My case  CSS           header     height  100px     background-image  url http       head6 jpg      background-position  center     background-repeat  no-repeat     background-color  grey

User · Answer

There is a solution that I found out today  works in IE6   FF  Opera  Chrome     lt img src  willbehidden png    style  width 0px  height 0px  padding  8px  background  url newimage png    gt    How it works    The image is shrunk until no longer visible by the width  amp  height   Then  you need to  reset  the image size with padding  This one gives a 16x16 image  Of course you can use padding-left   padding-top to make rectangular images  Finally  the new image is put there using background  If the new background image is too large or too small  I recommend using background-size for example  background-size cover  which fits your image into the allotted space     It also works for submit-input-images  they stay clickable   See live demo  http   www audenaerde org csstricks html imagereplacecss  Enjoy

User · Answer

To reiterate a prior solution and to stress the pure CSS implementation here is my answer     A Pure CSS solution is needed in cases where you are sourcing content from another site  and thus you have no control over the HTML that is delivered   In my case I am trying to remove branding of licensed source content so that the licencee does not have to advertise for the company they are buying the content from   Therefore  I m removing their logo while keeping everything else   I should note that this is within my client s contract to do so        image size is 204x30         width 0       height 0       padding-left 102px       padding-right 102px       padding-top 15px       padding-bottom 15px       background-image url http   sthstest Style 20Library StThomas images rhn nav logo2 gif

User · Answer

A collection of possible methods to set images from CSS    CSS2 s  after pseudo-element or the newer syntax   after from CSS3 along with the content  property     First W3C Recommendation  Cascading Style Sheets  level 2 CSS2 Specification 12 May 1998 Latest W3C Recommendation  Selectors Level 3 W3C Recommendation 29 September 2011  This method appends content just after an element s document tree content   Note  some browsers experimentally render the content property directly over some element selectors disregarding even the latest W3C recommendation that defines      Applies to   before and  after pseudo-elements     CSS2 syntax  forward-compatible       myClass after     content  url  somepicture jpg        CSS3 Selector      myClass  after     content  url  somepicture jpg        Default rendering  Original Size  does not depend on explicit size declaration      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    but even at the time of this writing  behaviour with a  lt IMG gt  tag is still not defined and although it can be used in a hacked and non standards compliant way  usage with  lt img gt  is not recommended   Great candidate method  see conclusions      CSS1 s background-image  property     First W3C Recommendation  Cascading Style Sheets  level 1 17 Dec 1996       This property sets the background image of an element  When setting a background image  one should also set a background color that will be used when the image is unavailable  When the image is available  it is overlaid on top of the background color      This property has been around from the beginning of CSS and nevertheless it deserve a glorious mention   Default rendering  Original Size  cannot be scaled  only positioned   However     CSS3 s background-size  property improved on it by allowing multiple scaling options     Latest W3C Status  Candidate Recommendation CSS Backgrounds and Borders Module Level 3 9 September 2014        length gt     lt percentage gt    auto   1 2    cover   contain   But even with this property  it depends on container size   Still a good candidate method  see conclusions       CSS2 s list-style  property along with display  list-item    First W3C Recommendation  Cascading Style Sheets  level 2 CSS2 Specification 12 May 1998    list-style-image  property sets the image that will be used as the list item marker  bullet      The list properties describe basic visual formatting of lists  they allow style sheets to specify the marker type  image  glyph  or number    display  list-item  mdash  This value causes an element  e g    lt li gt  in HTML  to generate a principal block box and a marker box    myClass       display  list-item      list-style-position  inside      list-style-image  url  someimage jpg        Shorthand CSS    lt list-style-type gt   lt list-style-position gt   lt list-style-image gt       myClass       display  list-item      list-style  square inside url  someimage jpg        Default rendering  Original Size  does not depend on explicit size declaration   Restrictions         Inheritance will transfer the  list-style  values from OL and UL elements to LI elements  This is the recommended way to specify list style information        They do not allow authors to specify distinct style  colors  fonts  alignment  etc   for the list marker or adjust its position    This method is also not suitable for the  lt img gt  tag as the conversion cannot be made between element types  and here s the limited  non compliant hack that doesn t work on Chrome     Good candidate method  see conclusions       CSS3 s border-image  property recommendation   Latest W3C Status  Candidate Recommendation CSS Backgrounds and Borders Module Level 3 9 September 2014    A background-type method that relies on specifying sizes in a rather peculiar manner  not defined for this use case  and fallback border properties so far  eg  border  solid         Note that  even though they never cause a scrolling mechanism  outset    images may still be clipped by an ancestor or by the viewport     This example illustrates the image being composed only as a bottom-right corner decoration    myClass       border  solid      border-width  0 480px 320px 0      border-image  url  http   i imgur com uKnMvyp jpg   0 100  100  0         Applies to  All elements  except internal table elements when border-collapse  collapse    Still it can t change an  lt img gt  s tag src  but here s a hack   instead we can decorate it     x000D   x000D   myClass   x000D      border  solid  x000D      border-width  0 96px 96px 0  x000D      border-image  url  http   upload wikimedia org wikipedia commons 9 95 Christmas bell icon 1 png    x000D                    0 100  100  0  x000D    x000D   lt img width  300  height  120   x000D       src  http   fc03 deviantart net fs71 f 2012 253 b 0 merry christmas card by designworldwide-d5e9746 jpg   x000D       class  myClass  x000D   x000D   x000D    Good candidate method to be considered after standards propagate     CSS3 s element   notation working draft is worth a mention also      Note  The element   function only reproduces the appearance of the referenced element  not the actual content and its structure     lt div id  img1  gt  lt  div gt    lt img id  pic1  src  http   i imgur com uKnMvyp jpg  class  hide  alt  wolf  gt   lt img id  pic2  src  http   i imgur com TOUfCfL jpg  class  hide  alt  cat  gt    We ll use the rendered contents of one of the two hidden images to change the image background in  img1 based on the ID Selector via CSS    img1       width  480px       height  320px       background  -moz-element  pic1  no-repeat      background-size  100  100       hide  display  none    Notes  It s experimental and only works with the -moz prefix in Firefox and only over background or background-image properties  also needs sizes specified    element   Live Demo      Conclusions   Any semantic content or structural information goes in HTML  Styling and presentational information goes in CSS  For SEO purposes  don t hide meaningful images in CSS  Background graphics are usually disabled when printing  Custom tags could be used and styled from CSS  but primitive versions of Internet Explorer do not understand  IE not styling HTML5 tags  with shiv   without Javascript or CSS guidance    SPA s  Single Page Applications   by design  usually incorporate images in the background   Having said that  let s explore HTML tags fit for image display   The  lt li gt  element  HTML4 01    Perfect usecase of the list-style-image with display  list-item method   The  lt li gt  element  can be empty  allows flow content and it s even permitted to omit the  lt  li gt  end tag    x000D   x000D   bulletPics  gt  li  display  list-item  x000D   img1  list-style  square inside url  http   upload wikimedia org wikipedia commons 4 4d Nuvola erotic png    x000D   img2  list-style  square inside url  http   upload wikimedia org wikipedia commons 7 74 Globe icon 2014-06-26 22-09 png    x000D   img3  list-style  square inside url  http   upload wikimedia org wikipedia commons c c4 Kiwi fruit jpg    x000D   lt ul class  bulletPics  gt  x000D       lt li id  img1  gt movie lt  li gt  x000D       lt li id  img2  gt earth lt  li gt  x000D       lt li id  img3  gt kiwi lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D    Limitations  hard to style  width  or float  might help   The  lt figure gt  element  HTML5       The figure element represents some flow content  optionally with a caption  that is self-contained  like a complete sentence  and is typically referenced as a single unit from the main flow of the document    The element is valid with no content  but is recommended to contain a  lt figcaption gt       The element can thus be used to annotate illustrations  diagrams  photos  code listings  etc    Default rendering  the element is right aligned  with both left and right padding      FIGURE Live Demo   The  lt object gt  element  HTML4       To include images  authors may use the OBJECT element or the IMG element    The data attribute is required and can have a valid MIME type as a value      lt object data  data x-image x   gt  lt  object gt    Note  a trick to make use of the  lt object gt  tag from CSS would be to set a  custom valid MimeType x-image x followed by no data  value has no data after the required comma     Default rendering  300 x 150px  but size can be specified either in HTML or CSS    OBJECT Live Demo     The  lt SVG gt  tag  Needs a SVG capable browser and has a   lt image gt  element for raster images   SVG Live Demo   The  lt canvas gt  element  HTML5        The width attribute defaults to 300  and the height attribute defaults to 150     CANVAS Live Demo   The  lt input gt  element with type  image   Limitations            the element is expected to appear button-like to indicate that the element is a button      which Chrome follows and renders a 4x4px empty square when no text  Partial solution  set value          lt input type  image  id  img1  value     gt     INPUT type image Live Demo     Also watch out for the upcoming  lt picture gt  element in HTML5 1  currently a working draft

User · Answer

No you can t set the image src attribute via CSS  The closest you can get is  as you say  background or background-image  I wouldn t recommend doing that anyway as it would be somewhat illogical   However  there is a CSS3 solution available to you  if the browsers you re targeting are able to use it  Use content url as described in Pacerier s answer  You can find other  cross-browser solutions in the other answers below

User · Answer

I know this is a really old question however no answers provide the proper reasoning for why this can never be done   While you can  do  what you are looking for you cannot do it in a valid way   In order to have a valid img tag it must have the src and alt attributes   So any of the answers giving a way to do this with an img tag that does not use the src attribute are promoting use of invalid code   In short  what you are looking for cannot be done legally within the structure of the syntax   Source  W3 Validator

User · Answer

Put several images in a  controlling  container  and change the container s class instead  In CSS  add rules to manage images  visibility depending on the container s class  This will produce the same effect as changing img src property of a a single image   HTML    lt span id  light  class  red  gt       lt img class  red  src  red png    gt       lt img class  yellow  src  yellow png    gt       lt img class  green  src  green png    gt   lt  span gt    CSS    light                  light                    display  none           all images are hidden  light red      red       display  inline         show red image when  light is red  light yellow   yellow    display  inline            or yellow  light green    green     display  inline            or green   Note that it will preload all images  like with CSS backround-images  but unlike changing img src via JS

User · Answer

I found a better way than the proposed solutions  but it does use the background-image indeed  Compliant method  cannot confirm for IE6   Credits  http   www kryogenix org code browser lir    lt img src  pathTo myImage jpg   gt    The CSS   img src   pathTo myImage jpg          background-image  url  mynewimg jpg       lets say 20x20        width  20px       display inline-block      padding  20px 0 0 0      height  0px  important          for IE 5 5 s bad box model        height      20px      The old image is not seen and the new is seen as expected    The following neat solution only works for webkit  img src   pathTo myImage jpg             note           content         display inline-block       width  20px      height  20px      background-image  url  mynewimg jpg       lets say 20x20

User · Answer

You can define 2 images in your HTML code and use display  none  to decide which one will be visible

User · Answer

Just use HTML5       lt picture gt       lt source srcset  smaller jpg  media   max-width  768px   gt       lt source srcset  default jpg  gt       lt img srcset  default jpg  alt  My default image  gt   lt  picture gt

User · Answer

Loading IMG src from CSS definition  using modern CSS properties  x000D   x000D   lt style gt    body       --imgid  1025     optional default img            shoes       --imgid  21          bridge       --imgid  84         img       --src     i picsum photos id  var --imgid   180 180 jpg        lt  style gt   lt script gt    function loadIMG img        img src   getComputedStyle img     compute style for img        getPropertyValue  --src             get css property        replace       g                         strip quotes and space       lt  script gt   lt img src onerror loadIMG this  class bridge gt   lt img src onerror loadIMG this  class shoes gt   lt img src onerror loadIMG this  gt  x000D   x000D   x000D    the empty src definition on an  lt IMG gt  triggers the onerror handler  loadIMG function loadIMG function calculates the CSS value strips all illegal characters sets the IMG src when the CSS changes  the image is NOT updated  You have to call loadIMG again  JSFiddle  https   jsfiddle net CustomElementsExamples vjfpu3a2

User · Answer

i used the empty div solution  with this CSS    throbber       background-image  url  Content pictures ajax-loader gif       background-repeat  no-repeat      width  48px      height  48px      min-width  48px      min-height  48px      HTML    lt div id  throbber  gt  lt  div gt

User · Answer

As far as I am aware of  YOU CANNOT  CSS is about style and image s src is content

User · Answer

Using CSS  it can t be done  But  if you are using JQuery  something like this will do the trick      img myClass   attr  src    http   somwhere

User · Answer

If you are trying to add an image in a button dynamically based on the context of your project  you can use the   take to reference the source based on an outcome   Here I am using mvvm design to let my Model Phases 0  value determine whether I want my button to be populated with images of a lightbulb on or off based on the value of the light phase   Not sure if this helps   I m using JqueryUI  Blueprint  and CSS   The class definition should allow you to style the button based on whatever you d like        lt button gt                                lt img class    Model Phases 0     light-on    light-off    src    Model Phases 0       Images LightBulbOn png       Images LightBulbOff png     gt                                  lt img class    Model Phases 0     light-on    light-off    src    Model Phases 0       Images LightBulbOn png       Images LightBulbOff png     gt        lt img class    Model Phases 0     light-on    light-off    src    Model Phases 0       Images LightBulbOn png       Images LightBulbOff png     gt

User · Answer

Here is a very good solution -  http   css-tricks com replace-the-image-in-an-img-with-css   Pro s  and Con s        works with vector image that have relative width height  a thing that RobAu s answer does not handle       is cross browser  works also for IE8       it only uses CSS  So no need to modify the img src  or if you do not have access do not want to change the already existing img src attribute    -  sorry  it does use the background css attribute

User · Answer

HTMl Code        lt  DOCTYPE html gt   lt html gt        lt head gt            lt link type  text css  rel  stylesheet  href  css destination    gt        lt  head gt        lt body gt   lt  -- click-able pic with link -- gt              lt a href  site you want  gt    lt  -- Take the off if you don t want click-able link -- gt                   lt h1 id or class   nameOfClassorid  gt                        lt span gt Text that is not important lt  span gt                   lt  h1 gt              lt  a gt         lt  body gt    lt  html gt    Css Code   span        display  none    h1 id or class        height  of pic       width  of pic     Only flaw  so far  read bottom         background-image url     image destination         h1 id or class hover      Now the awesome part         background-image url     new background              I ve been studying html after school for a few days  and wanted to know how to do this  Found out the background and then put 2 and 2 together  This works 100  I checked  if not make sure you fill in necessary things    We need to specify height  because without it there would be nothing    I ll leave this basic shell you can add-on   Example     lt  DOCTYPE html gt    lt html gt        lt head gt            lt link type  text css  rel  stylesheet  href  style css    gt        lt  head gt        lt body gt              lt a href  http localhost  gt                    lt h1 gt                        lt span gt Text that is not important lt  span gt                   lt  h1 gt              lt  a gt        lt  body gt    lt  html gt  span        display  none    h1        height  100px       width  100px       background-image url  http   linuxlog org wp-content uploads 2011 01 Ubuntu-Desktop- -2011-01-11-191526-300x225 png       h1 hover        height  300px       width  300px       background-image url  http   cdn css-tricks com images ads wufoo-600x600-red png        P S  Yes I am a Linux user

User · Answer

Alternative way   myClass   background  url   img loading big gif         lt div class  myClass  gt  lt  div gt

User · Answer

If you don t want to set a background property then you can t set the src attribute of an image using only CSS   Alternatively you can use JavaScript to do such a thing

User · Answer

Any method based on background or background-image is likely to fail when user prints the document with  print background colors and images  disabled  Which is unfortunately typical browser s default   The only print-friendly and cross-browser compatible method here is the one proposed by Bronx

User · Answer

Use content url  image jpg     Full working solution  Live Demo     x000D   x000D   lt  doctype html gt  x000D   x000D   lt style gt  x000D   MyClass123  x000D   content url  http   imgur com SZ8Cm jpg    x000D    x000D   lt  style gt  x000D   x000D   lt img class  MyClass123   gt  x000D   x000D   x000D    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

User · Answer

You can convert it with JS       image-class   each function        var processing     this  attr  src          this  parent   css   background-image   url   processing              this  hide

User · Answer

Some data I would leave in HTML  but it is better to define the src in CSS    lt img alt  Test Alt text  title  Title text  class  logo  gt    logo       content url     images logo png

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

Examples related to html

Examples related to css

Examples related to image

Examples related to src