Fotorama transparent background

Question

I'm using the Fotorama slider plugin, where you can open an image in fullscreen. I need the background to be transparent, but I can't seem to change it.

You can see what I mean by clicking on this link and open one of the images in the small slider in full screen.

I have tried to change all background in the slider to the following:

background: rgba{0,0,0,0);

for me setting it on `.fotorama--fullscreen`, which i see you already have in comments in your CSS, works (*it is just that the page has almost nothing in the space around the image so it shows just white or the search box occasionally*) — Gabriele Petrioli, Apr 05 '16 at 11:33

score 1 · Answer 1 · edited May 23 '17 at 12:24

1

It's about this part of code :

.fotorama--fullscreen .fotorama__nav, .fotorama--fullscreen .fotorama__stage {
    background: #000;
}

But you can't set it to transparent, you can set it to white. Or you can add a specific image instead.

EDIT

You can't set it to transparent because you enter in a fullscreen mode and by default, the background is set to black. You can change this color by every color you wants but you will never see the content of your site behind that way.

See this post on SO :

Background/element goes black when entering Fullscreen with HTML5

edited May 23 '17 at 12:24

Community

1
1

answered Apr 05 '16 at 08:45

Vincent G

8,547
1
18
36

I've added `.fotorama--fullscreen .fotorama__nav, .fotorama--fullscreen .fotorama__stage { background: url(http://www.clauson-kaas.com/cgi-files/transparent.png) !important; }` But it didn't make any difference – Nreck Apr 05 '16 at 09:36
Right, my answer was unclear but I explain it a bit better. In fact,with this plugin, you enter in a fullscreen mode. See my updated answer – Vincent G Apr 05 '16 at 09:39
Check fotorama options to change this behaviour : http://fotorama.io/customize/options/ – Vincent G Apr 05 '16 at 09:43
Your answer isn't valid. I figured it out. I have made a new answer. – Nreck Apr 07 '16 at 11:36
Yes I've checked what you change in the code. I've tried that myself with firebug but it didn't works. Maybe it's more easy to debug when you can play with the real code instead of with the inspector. – Vincent G Apr 07 '16 at 11:47

score 0 · Accepted Answer · answered Apr 07 '16 at 11:36

It is possible - I figured it out myself with the following code:

.fullscreen .fotorama--fullscreen {
    background: transparent !important;
}

.fullscreen .fotorama__wrap {
    background: rgba(0,0,0,0.7) !important;
}

.fullscreen .fotorama__img {
    top: 0px !important;
    width: 50% !important;
    height: auto !important;
    margin: auto !important;
    left: 0px !important;
}

Fotorama transparent background

2 Answers2