Question

Will do my best to explain this. =>

I am using Fancybox and everything works great. Here comes the issue. I have an image that is semi-transparent. When the image is loaded instead of seeing part of the background where the image is there is a background color. Is there a way to have the background (behind the image) be transparent? I am not referring to the overlay. I am referring to directly behind the image.

Thanks for any and all help and advice.

Here is the code for the Fancybox:

<script type="text/javascript" >
   var $j = jQuery.noConflict();
    $j(document).ready(function(){

        Engine.Initialize(); //This line is for other JS - not fancybox

    $j("#start").fancybox({
     'padding' : 0
    });
  });
</script>

Here is the screenshot showing what I am referring to.

EDIT
Updated code for a couple changes I made with page since post and added screenshot of issue.

Answer 1

Try this…

$j("a.fancybox").fancybox({
    onComplete: function() {
        $('#fancybox-outer').css('opacity', '0.4');
    }
});

…or…

#fancybox-outer {
    opacity: .4 !important;
}