Use data attribute to set the background image of a pseudo element

Question

Is there a convenient way to set the background image of a pseudo element via data attributes?

I'm trying to achieve something like this, but i want to be able to set the background image in the markup via my CMS:

.full-width {
  background-color: #ededed;
  width: 100%;
  position: relative;
  z-index: -1;
}
.full-width:after {
  content: '';
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
  top: 0;
  background-image: url(//unsplash.it/1080/1920);
  background-size: cover;
  background-position: left center;
  z-index: -1;
}
.full-width .container {
  z-index: 99;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="full-width">
  <div class="container">
    <div class="row">
      <div class="col-xs-6">
        <h2>Test 123</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</div>

not directly a duplicate of How can I use a data attribute to set a background-image in CSS? because i'm talking about pseudo elements. Thanks for linking me up with this, but I was already aware of these techniques.

What's with all the duplicate marks? This clearly isn't _that_ similar to what they linked to. :? — Nebula, Jun 08 '15 at 16:48

score 3 · Answer 1 · answered Jun 08 '15 at 15:25

As per the compatibility table for the CSS attr function, you can only use the value returned by attr in the content rule (if you want any form of cross-browser support).

So you'd need to use JavaScript if you want to implement something similar to what you're hoping for, as attr can not be used in background.

Scimonster · Answer 2 · 2015-06-08T15:34:36.207

Right now, it is not possible. In the future, hopefully. Using the attr() function, you can get the attribute value from the element. When using a pseudo-element, it gets the attribute from the original element. So you can do background-image: attr('data-bg' 'url') to get the data-bg attribute and treat it as a URL.

Unfortunately, this is not supported in any browsers yet, and is still an experimental (subject to removal) part of the spec.

.full-width {
  background-color: #ededed;
  width: 100%;
  position: relative;
  z-index: -1;
}
.full-width:after {
  content: '';
  display: block;
  position: absolute;
  width: 50%;
  height: 100%;
  left: 50%;
  top: 0;
  background-image: attr('data-bg' 'url');
  background-size: cover;
  background-position: left center;
  z-index: -1;
}
.full-width .container {
  z-index: 99;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<div class="full-width" data-bg="//unsplash.it/1080/1920">
  <div class="container">
    <div class="row">
      <div class="col-xs-6">
        <h2>Test 123</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>
</div>

I'll upvopte both of your answers ;) – schliflo Jun 08 '15 at 15:31 — schliflo, Jun 08 '15 at 15:31

Use data attribute to set the background image of a pseudo element

2 Answers2