jQuery to FadeOut Background image declared by HTML inline style

Question

I've been trying to use Jquery to fadeOut only the background image in a div that's declared via inline style and not CSS. For example:

<div class="big-video-wrap-image" style="background:url(images/image1.jpg) repeat;">

How should I go about applying a fade out effect to the div class's background style so that the div remains but only the background image is gone (by fading out).

Possibly unnecessary info: To share what I'm wanting to do this for will bring up some additional issues but I'm hoping sharing these details will paint a complete picture of what I'm doing.

I'm using:

Jquery 1.8.3
Modernizr 2.6.2
Cycle 2.9
Easing 1.3
prettyPhoto
BigVideo.js with all dependency libraries.

BigVideo.js displays a dynamically sized video in the background of a website (or theoretically any div).

But it doesn't work well with mobile devices. So I'm using Modernizr to check for devices so the script to run BigVideo.js is setup like this:

var BV = new $.BigVideo();
if (Modernizr.touch) {
} else {
    BV.init();
    BV.show($('.big-video-play').attr('data-video'),{altSource:$('.big-video-play').attr('data-video2')});
    $(".big-video-wrap-image").attr('[style*="background"]') /*No idea what should be on this line*/

}

the html as such:

<div class="big-video-wrap big-video-play" data-video="vids/vid1.mp4" data-video2="">
<div class="big-video-wrap-image" style="background:url(images/ally1.jpg) repeat;">

and External CSS as such:

.big-video-wrap {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
.big-video-wrap-image {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}

This is being used in a responsive website layout. So that's how it's setup right now and both the bigvideo.js throws the video at the top of the master body div instead of the correct div class and of course making the firstframe/mobile image fade upon video loading isn't working either.

Help is greatly appreciated. Thank you.

tbleckert tbleckert · Accepted Answer · 2013-01-25T23:22:51

One way would be to create an image to position over the div. Then take away the background style and fade out the image.

var $imageDiv = $(".big-video-wrap-image"),
    bgUrl     = $imageDiv.css('background-image').split('(')[1].replace(')', '') //Should probably be done in another way, feel free to fill in anyone,
    imgDummy  = new Image();

imgDummy.onload = function () {
    $(this).addClass('dummyImg').insertBefore($imageDiv).fadeOut();
    $imageDiv.removeAttr('style');
};

imgDummy.src = bgUrl;

http://jsfiddle.net/tbleckert/SkQ2Y/1/

jQuery to FadeOut Background image declared by HTML inline style

1 Answers