Can not insert css image into pseudo :before

Question

I am trying to insert a background image into a header:before element, but jquery fails.

HTML content

 <a href="image.jpg" class="image-source">Try insert image into .header:before</a>

JS

 $('.image-source').click(function() {
   var src = $(this).attr('href');
    // slash is okay
    $('.header:before').css('backgroundImage', 'url(/' + src + ')'); 
    return false;
 });

CSS:

.header {
  position: relative;
  background: url(anotherimage.jpg) no-repeat;
}
.header:before  {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  min-width:50%;
  min-height:50%;
  content: "";
}

Does anyone know if I am dealing with a bug here, or missed an obvious? Note, I can not use .header itself, because I am working with multiple background image, thats why I need :before.

UPDATE: Might be this:

possible duplicate of [Manipulating CSS :before and :after pseudo-elements using jQuery](http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery) — Rob W, Apr 10 '12 at 12:25
have you tried just changing a class instead of setting the image directly? — Andy, Apr 10 '12 at 12:27
@RobW that would be the case, but `content: url(attr(data-src));` is invalid & doesn't work... — JKirchartz, Apr 10 '12 at 12:30

score 2 · Answer 1 · answered Apr 10 '12 at 12:26

2

you could insert the background image as straight content, instead of using javascript

.header:before  {
  ...
  content: url(...);
}

answered Apr 10 '12 at 12:26

Fabrizio Calderan

120,726
26
164
177

What if he needs to change the background programatically? This isn't an answer to the OPs problem. – Rory McCrossan Apr 10 '12 at 12:27
1

Thanks, but I am trying to have fun with jquery. And I can not insert dynamic image using content, either – swan Apr 10 '12 at 12:27

Starx · Accepted Answer · 2012-04-10T12:53:05.233

2

You cannot manipulate Pseudo Elements using jQuery. They are not part of DOM. You might want to avoid ugly workaround for this as well.

One of the most ugliest but my best workaround is this

var css = '.image:after { content: url("https://www.google.com/images/srpr/logo3w.png");  width: 400px; height: 100px; }';

$("#replaceable").html(css);
$("div").addClass('image');

$("div").click(function() {
    var css = '.image:after { content: url("http://www.google.com/logos/2012/elias_lonnrot-2012-hp.jpg");  width: 400px; height: 100px; }';
    $("#replaceable").html(css);
});

Demo

edited Apr 10 '12 at 12:53

answered Apr 10 '12 at 12:43

Starx

77,474
47
185
261

Yes, thanks, thats exactly what T.J. Crowder said here: http://stackoverflow.com/questions/5814810/target-before-and-after-pseudo-elements-with-jquery#comment6671974_5814824 – swan Apr 10 '12 at 12:44
@swan, Did I mention it is exactly what you need. – Starx Apr 10 '12 at 12:57
Still digesting. Sound more complicated than what I am trying to do. – swan Apr 10 '12 at 12:58
@swan, There is no pleasing you, Is it? – Starx Apr 10 '12 at 13:02
Its good, thanks, but the additional markup id="replaceable" is defeating my clean markup. Still digesting – swan Apr 10 '12 at 13:08
I accept the fact "You cannot manipulate Pseudo Elements using jQuery" – swan Apr 10 '12 at 13:15

JKirchartz · Answer 3 · 2012-04-10T12:47:08.123

1

I think your best best would be to do this: css:

header.first:after{/* your image etc */}
header.second:after{/* your image etc */}
header.third:after{/* your image etc */}

then jQuery:

var headers = ["first","second","third"];
var i = 0;
$(".next").click(function(){
  i %= headers.length;
  $("header").removeClass(headers[i-1]).addClass(headers[i]);
  i++;
});

edited Apr 10 '12 at 12:47

answered Apr 10 '12 at 12:34

JKirchartz

17,612
7
60
88

Thanks, sounds redundant with 20 images to play with :( – swan Apr 10 '12 at 12:38
1

@swan, yeah, there's gotta be a better way, can't you add an element to your html? it'll be easier to change the BG image on an element that's actually in the DOM... – JKirchartz Apr 10 '12 at 12:43
No, I am afraid. Its dynamic insertion of images for selection. Images are aggregated from one or two folders at different places, too. The unavoidable is images may grow to hundred overtime. – swan Apr 10 '12 at 12:47
@swan I've reduced the redundancy in the JS... check it out, but if you have hundreds CSS doesn't seem like the best answer for this. – JKirchartz Apr 10 '12 at 12:48
"can't you add an element to your html". This tricks me to do a reverse. .header is for Dynamic images, and .header:before for static dom. This doesn't solve the original question, but make the ball rolls. Thanks a lot – swan Apr 10 '12 at 12:53

Can not insert css image into pseudo :before

3 Answers3

Demo