3

i am trying to set data-img as image in pseudo element without success, here is what i have tried so far:

the markup:

<div data-img="http://www.hdwallpapers.in/walls/cute_baby_in_autumn-wide.jpg">radomPicture</div>

the style:

div:before{
    content: url('attr(data-img)');
    position:absolute;
    width:200px;
    height:200px;
}

result broken image: http://jsfiddle.net/vfPKb/

enter image description here

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
Gildas.Tambo
  • 22,173
  • 7
  • 50
  • 78
  • 2
    possible duplicate of [Css Content, Attr and Url in the same sentence](http://stackoverflow.com/questions/9244197/css-content-attr-and-url-in-the-same-sentence) – David Thomas Sep 20 '13 at 21:02
  • 1
    Short answer is that this isn't possible at present. Duplicate link has more in depth explanations. – Travis J Sep 20 '13 at 21:12

1 Answers1

-2

I'm not entirely sure this is possible. You may want to mess around with CSS variables, although you may run into the same problem you're having here; I don't believe that you can send one CSS function a value generated from another (even CSS variables are accessed through a var function). I know it's not as satisfying, but have you considered some quick and easy jQuery?

$("div[data-img]").each(function(){$(this).css("background-image", "url(" + $(this).attr("data-img") + ")")});

Here's a forked JSFiddle

You could do something similar with vanilla Javascript, as well, if you're reluctant to add new libs to your project.

EDIT:

If you're able to edit the markup, a far simpler (although maybe not entirely possible) solution may be to just use an inline style:

<div style="background-image: url('http://www.hdwallpapers.in/walls/cute_baby_in_autumn-wide.jpg')">radomPicture</div>

I can't imagine many scenarios where adding an img-data attribute would be significantly easier than adding a style attribute, but I guess that depends on how all of this markup is being generated, or if that power is in your hands to begin with.

Sandy Gifford
  • 7,219
  • 3
  • 35
  • 65
  • i know how to use js i need a pure css solution – Gildas.Tambo Sep 20 '13 at 21:34
  • @ Sandy Gifford yes i did but i want to use the div, before and after separately to save as much data as possible in a single element – Gildas.Tambo Sep 20 '13 at 22:03
  • 1
    @kougiland You should still be able to use `:before` and `:after`. Using inline styling shouldn't have any effect on that, it's just more widely supported than `data-` attributes, and doesn't involve stacking functions. **EDIT:** unless you mean using the same background image on the `:before` and `:after` elements as on the `div` itself, that *is* trickier. – Sandy Gifford Sep 20 '13 at 22:10
  • @ Sandy Gifford you are correct i want to use the same background with different css filter – Gildas.Tambo Sep 20 '13 at 22:23
  • @kougiland Ahhh, that could be trickier. There's no real way to do inline pseudos ([see this question](http://stackoverflow.com/questions/1033156/how-to-write-ahover-in-inline-css)), so that knocks out that solution (for now). I can't think of any way to achieve this with a simple generic approach. Can you post more info about what exactly you're trying to achieve? Maybe we can hack it a bit. – Sandy Gifford Sep 20 '13 at 22:30
  • @kougiland ***ALTHOUGH*** you COULD try experimenting with **[this](http://www.w3.org/TR/2002/WD-css-style-attr-20020515#examples)**. Looks exciting. – Sandy Gifford Sep 20 '13 at 22:34
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/37773/discussion-between-kougiland-and-sandy-gifford) – Gildas.Tambo Sep 21 '13 at 07:52
  • @kougiland Unfortunately, my work blocks the Stack chat sub domain. – Sandy Gifford Sep 23 '13 at 14:34