CSS Attr() Concatenation with Url Path

CSS attr() concatenation with url path

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.}

string concatenation in css

You can't do dynamic string interpolation in the way that you're suggesting, but if you have a limited number of possible values for the [type] attribute, you could create styles for each one:

.your .selector[type="foo"] {
    background-image: url('../img/icons/foo_10.png');
}
.your .selector[type="bar"] {
    background-image: url('../img/icons/bar_10.png');
}
.your .selector[type="baz"] {
    background-image: url('../img/icons/baz_10.png');
}

If you've got an unreasonable number of types, then you'll probably need to come up with a better solution than I've listed here.

Css Content, Attr and Url in the same sentence

It's neither a bug nor a mistake. The currently supported syntax (CSS2.1) for content is:

content: normal | none | 
         [ <string> | <uri> | <counter> | attr() |
           open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

I.e.:

• The literal normal, none or inherit

• Or any number of these in succession:

  • a string - "hello"
  • a (constant) URI - url("image.jpg")
  • a counter - counter(section)
  • an attribute - attr(id)
  • open-quote, close-quote, no-open-quote, no-close-quote

The specs don't allow for them to be "nested", they can only follow each other, e.g.:

content: "Photo: " url("../Img/Photo.jpg") attr(id);
/* Which is not what you want */

The current CSS3 drafts don't allow for it either. Possibly - if it's been discussed - because most use cases would have little to do with presentation and more to do with actual content.

Concatenate strings in Less

Use Variable Interpolation:

@url: "@{root}@{file}";

Full code:

@root: "../img/";
@file: "test.css";

@url: "@{root}@{file}";

.px{ background-image: url(@url); }

SCSS concatenating variables and string values results in quotations around the entire property value

try this

$border-values: unquote($border-width + " solid "  + $border-color);

.box {
 border-left: $border-values;;
}

the unquote function Removes quotes from a string. Check the Official Doc

Set an image background according to a data field in the div using JavaScript

The first issue is that you need to concatenate the data attribute. You can't include it within a string by doing [data-img] as you have.

Additionally, the jQuery css() function takes two different types of arguments: You can either do .css(property, value) or .css({property:value, property:value, ... }). You seem to have mixed these two and are passing it an object where it's {property,value} instead.

$("div.element-item").each(function(){
    var imgUrl = "/path/" + $(this).data("img");
    $(this).css("background-image", "url(" + imgUrl + ")");
});

Is there a way to interpolate CSS variables with url()?

You can perform interpolation with most CSS functions, including rgba() (see an example here). In fact, interpolation is one of the main features of custom properties.

But you cannot do this with url(), as url(var(--url)) is parsed not as a url( function token followed by var(--url) followed by a ), but a single url() token that is invalid because the var(--url) is being treated as a URL itself, and unquoted URLs in url() tokens cannot contain parentheses unless they are escaped. This means the substitution never actually occurs, because the parser never sees any var() expressions in the property value — indeed, your background declaration is completely invalid.

If you didn't understand any of that, that's fine. Just know that you cannot use var() interpolation with url() due to legacy reasons.

Even though the problem depicted in the question is related to the legacy url() token, you cannot do this by building URL tokens out of several var() expressions either, in case you were thinking of trying something like --uo: url(; --uc: ); or --uo: url("; --uc: ");, and background: var(--uo) var(--url) var(--uc);. This is because custom properties cannot contain unmatched string delimiters or parts of url() tokens (called bad URL tokens).

If you want to specify a URL in a custom property, you need to write out the entire url() expression, and substitute that entire expression:

:root {
  --url: url("https://download.unsplash.com/photo-1420708392410-3c593b80d416");
}

body {
  background: var(--url);
}

Or, use JavaScript instead of var() to perform the interpolation.

Is it possible to concatenate an img src in React?

You've missed $ sign and brackets for attribute

<img src={`https://www.cryptocompare.com/${this.state.cryImage}`} />

---

Related Topics