1

I will try my best to explain this -->

I am using Fancybox and everything works great. Here comes the issue.

I want to remove the white background as well as the shadow of the iframe-pop, not the overlay! I tried playing around with the css files which didn't really work...

If you click on the "#1" square you can see what I mean : http://testingpage.de/ (I destroyed the background image on purpose to see the white bg.)

Thanks for any and all help and advice!

UPDATE:

Because of the helpful tips I could get rid of the white background of images. It's still not working for iframe...

Costa
  • 23
  • 1
  • 1
  • 4
  • remove these two rules from line 41 of fancybox css: `-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);` and the box shadow should be removed – David Alsbright Nov 25 '13 at 17:53
  • problem 1/2 solved, thanks! Now I just have to get rid of the white bg... – Costa Nov 25 '13 at 17:58
  • What happens when you trigger something that isn't an iframe in a fancybox? – David Alsbright Nov 25 '13 at 18:22
  • The transparency is working if i trigger a regular image. The problem seems to be iframe... – Costa Nov 25 '13 at 19:11
  • have you tried removing the background colour in the fancybox options? try something like this: http://stackoverflow.com/questions/16482779/iframe-transparent-background-on-fancybox-2-1-4 – David Alsbright Nov 25 '13 at 19:20

1 Answers1

9

No need to edit the original css file ... just add this in your custom css file and after loading the fancybox css file 

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 0 0;
       -moz-box-shadow: 0 0 0;
            box-shadow: 0 0 0;
}

then your script

$(".fancybox").fancybox({
    padding: 0 // remove white border
});

See JSFIDDLE

EDIT :

For a full transparent background, also add

.fancybox-skin {background: transparent}

in your custom css file

See updated JSFIDDLE

NOTE: this make fancybox transparent BUT the background of your iframe content (body, html) should be transparent too

JFK
  • 40,963
  • 31
  • 133
  • 306
  • Thanks, but I don't just want to remove the border. I want to remove the white background behind the image. I attached a screenshot for clarification. The white area should be transparent instead of white: http://i.imgur.com/gPu9daM.png – Costa Nov 25 '13 at 18:04
  • Thanks! It's transparent for images, the iframe bg is still white. – Costa Nov 25 '13 at 19:14
  • @Costa you need to edit (individually) the css of the pages opened inside the iframe because so far they have css background `#fff` property – JFK Nov 25 '13 at 20:09