2

I am having a div with before selector. I set the background of this div and added CSS blur filter to it. I need to change the background image of this pseudo element dynamically using javascript. When I manually give a location for the background, it works fine and I succeeded in setting the image dynamically by appending the style to the head tag but the image won't resize. I need the image to be stretched to the full width of viewport but it is displayed in its original size only. Here is my CSS and javascript

CSS:

 .content-wrapper::before {
    position: fixed;
    z-index: -1;

    display: block;

    width: 100%;
    height: 100%;

    /* background: url(/landing/images/profile.jpg); */
    background-size: cover;

    -webkit-filter: blur(25px)brightness(.7);
       -moz-filter: blur(25px)brightness(.7);
         -o-filter: blur(25px)brightness(.7);
        -ms-filter: blur(25px)brightness(.7);
            filter: blur(25px)brightness(.7);
}

Javascript:

 $('head').append('<style>.content-wrapper::before{background:url('+response.data.url+') no-repeat}</style>');

This is the result now:

The image appears in the top right but I want it to be filling the viewport

Update: Solution

Alex's fiddle link in the comments section worked like a charm. I had to change the position:fixed and background to position:absolute and background-image

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
Anbu369
  • 99
  • 1
  • 13
  • This seems to be similar, take a look: http://stackoverflow.com/questions/18482219/css-pseudo-element-size-issue – Ivan Chernykh Oct 28 '14 at 07:29
  • @Cherniv I tried that solution. Still works when I manually give it in the stylesheet but not when I set from JavaScript . – Anbu369 Oct 28 '14 at 07:35
  • 1
    I'd be willing to be money that the issue is with position: fixed. In my experience, position: fixed psuedo-elements behave in a very buggy manner in modern browsers. Either way, I made this fiddle where everything seems to work ok when I changed the position to absolute: http://jsfiddle.net/bvqp6vzn/2/ – AlexZ Oct 28 '14 at 07:38
  • 1
    Could it be that you are using the `background` **shorthand** property (rather than `background-image`) and so the `background-size` is getting overrriden? – Paulie_D Oct 28 '14 at 09:38
  • @AlexZ Thanks for the fiddle. That worked. I had to use `position:absolute` and `background-image` and it worked. – Anbu369 Oct 28 '14 at 10:48
  • @Paulie_D Thanks. That was the problem as well. – Anbu369 Oct 28 '14 at 10:49

0 Answers0