CSS attr() concatenation with url path

Question

How can I concatenate the CSS attr() selector with static text in a url() field?

The HTML I use:

<div image='/Require/static.png'></div> //Example 2
<div image='static.png'></div> //Example 3, 4, 5

For example:

//image attribute contains the image name (and prefix location when needed, see example 2)
div[image]:before {
    background-image: url('/Image/static.png'); //Works
    background-image: url(attr(image)); // Works
    background-image: url('/Image/' attr(image)); //Fails
    background-image: url('/Image/' #attr(image)); //Fails
    background-image: url('/Image/' {attr(image)); //Fails
    }

So - if it is possible - How can I achieve this?

The CSS is fairly self-explanatory and shouldn't require HTML to understand. — BoltClock, Mar 21 '17 at 16:09
What browser are you testing in? I wouldn't have expected content: url(attr(image)); to work - it's a syntax error. — BoltClock, Mar 21 '17 at 16:10
Tested it in Safari and it works. No idea about other browsers. I can also use background-image: url() which is no problem to me. Edited the post to background-image — TVA van Hesteren, Mar 21 '17 at 16:11
Woops, text should be test. It's a typo. Will change it to div to be more clear anyway — TVA van Hesteren, Mar 21 '17 at 16:14
@TVA van Hesteren: Make sure you're only testing one declaration at a time. It might well be that url(attr(image)) appears to work only because what you're actually seeing is the url('/Image/static.png'). — BoltClock, Mar 21 '17 at 16:15
@BoltClock I use one declaration at a time, this is just to show what options I have tried so far and it's results — TVA van Hesteren, Mar 21 '17 at 16:15
[Check this answer](http://stackoverflow.com/a/9244712/7236046). You can't nest them like that. — , Mar 21 '17 at 16:16
@kevinb. thanks, it indeed is the same as the post you provide, only with a better title to ask the question — TVA van Hesteren, Mar 21 '17 at 16:22
At least read other comments who where in front of you, thanks — TVA van Hesteren, Mar 21 '17 at 16:25
Where do you think the link came from? When you vote to close, SO adds the _"Possible duplicate"_ link for you. — hungerstar, Mar 21 '17 at 16:45

score 15 · Accepted Answer · edited May 23 '17 at 12:10

It is not possible to create a composite url() value out of two or more strings. On top of the legacy url() value, which isn't even a proper CSS function (see Is there a way to interpolate CSS variables with url()? — which means you can't even do this with custom properties), the proper CSS function version of url() as defined in css-values-3 only accepts a single string.¹

You can concatenate multiple strings in a content declaration, but that is a feature of the content property, not of strings in CSS.

¹ _{Since url() accepts a single string, this does mean that a single attr() can be used as a URL value, also new to css-values-3, as attr(image url)... except browser support is nonexistent.}

Thanks for you answer and provided documentation! – TVA van Hesteren Mar 21 '17 at 16:21 — TVA van Hesteren, Mar 21 '17 at 16:21

CSS attr() concatenation with url path

1 Answers1

Linked

Related