jQuery css set background-image on body:after

Question

I'm using body:after to set page wallpaper.

body:after
{
    background-image: url('assets/img/wallpapers/<?php echo $getWallpaperFile; ?>');
}

CSS

content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-repeat: no-repeat;
background-position: 50% 0;
-ms-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;

That code is working OK when I try to reload the page.

But now I want to change that background using jQuery.

$("body:after").css("background-image", "url('http://hdwallpapersrocks.com/wp-content/uploads/2013/12/Colorful-new-born-feathers-awesome-wallpapers.jpg')");

Tried and not working.

My question, is it possible to set background-image to body:after on jQuery?

Answer 1

jQuery can't target :before and :after .

What you could do is this instead:

$('body').addClass('loaded');

Then in the css:

.body.loaded:after {
  /*background image*/
}

---

Since you've mentioned in comments that it's coming from javascript, instead of having an :after

You could just have a div replace the after with a class name.

Then you can just target $('body .newDiv'); and it will work.