Search code examples
fotorama

How to set background color for images in Fotorama plugin?


Fotorama jQuery plugin

In this plugin i use transparent PNG images. I need to set background color for images. I tried to set style, but it didn't work.

 <div class="fotorama">
 <img style="background-color: #ffff00" src="/slider/image1.png">
 <img style="background-color: #ffff00" src="/slider/image1.png">
 </div>

Solution

  • .fotorama__wrap--slide .fotorama__stage__frame {
        opacity: 1 !important;
        background-color: #FF0;
    }
    

    Find this classes in CSS, and add your bg-color rule... Btw, you can use developer tools in firefox, chrome, ie... (F12 will open it) and inspect element(s). That way, you can check/debug html/css/js easily... Note: this is solution for latest version of fotorama, not sure that class names are same in previous versions...