# Image zoom background color without transparency

**URL:** <https://tainacan.discourse.group/t/image-zoom-background-color-without-transparency/1047>\
**Category:** Suporte\
**Created:** [Agosto 24, 2022, 12:51pm UTC](https://tainacan.discourse.group/t/image-zoom-background-color-without-transparency/1047 "2022-08-24T12:51:12Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vedran\_Serbu](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/vedran_serbu/32/218_2.png) [@Vedran\_Serbu](https://tainacan.discourse.group/u/Vedran_Serbu)\
**Post date:** [Agosto 24, 2022, 12:51pm UTC](https://tainacan.discourse.group/t/image-zoom-background-color-without-transparency/1047/1 "2022-08-24T12:51:12Z")

</div>

Hi,  
I already asked about this option (twice) in previous versions of Tainacan, and you helped me. I know where to change color of the background when zooming the image, but you provided me with some aditional CSS to completly disable transparency. Now, something in 0.19 version has changed so CSS is not working any more for that transparency thing. This is link to old CSS that worked:

> [@Image zoom background color](https://tainacan.discourse.group/t/image-zoom-background-color/381):
>
> Hello! I need help with this thing - when I click on item image it opens the image in zoom mode , but the background in that mode is black. Is there any option to change that color to white (or any other color). I’m using Tainacan with Blocksy theme but could not find that kind of color preference in Blocksy customization. Tnx Vedran

Is there any way to disable the transparency of the background completly (again) when zooming the image?

You can check it here - [https://zbirkaleko.dad.hr/24-zeljeznica/2419.jpg](https://zbirkaleko.dad.hr/24-zeljeznica/2419.jpg) . When you click on the image, it goes to zoom mode but you can see the text and everything in the background.

tnx

Vedran

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Agosto 24, 2022, 12:54pm UTC](https://tainacan.discourse.group/t/image-zoom-background-color-without-transparency/1047/2 "2022-08-24T12:54:01Z")

</div>

Uhmm, We’re sorry that the change happened, we had to update the Photoswiper library after a major refactor that they did and this in fact means breaking css changes. It shouldn’t be something that would happen often. I’ll try to write again the css for you.

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Agosto 24, 2022, 12:57pm UTC](https://tainacan.discourse.group/t/image-zoom-background-color-without-transparency/1047/3 "2022-08-24T12:57:44Z")

</div>

One day if I find time I’ll take a moment to create this option hehe. So first, go to your customizer and remove the previous CSS that I gave to you. Then, add the following:

```css
.tainacan-photoswipe-layer .pswp__bg {
    opacity: 1.0 !important;
}

```

Notice that it is relativelly less code. That’s because making it white is now an option. You can go to the customizer → Your collection item options → Document and Attachments → Design Tab → scroll down till you find the lightbox color option. Set it to light.

Let me know if this solves!

---

<div class="post-metadata">

**Author:** ![Vedran\_Serbu](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/vedran_serbu/32/218_2.png) [@Vedran\_Serbu](https://tainacan.discourse.group/u/Vedran_Serbu)\
**Post date:** [Agosto 25, 2022, 7:09am UTC](https://tainacan.discourse.group/t/image-zoom-background-color-without-transparency/1047/4 "2022-08-25T07:09:59Z")

</div>

> [@mateus.m.luna](#):
>
> ```auto
> .tainacan-photoswipe-layer .pswp__bg {
> opacity: 1.0 !important;
> }
> 
> ```

It works…BUT…the lightbox color option is back to black, although I’ve set lightbox color option to LIGHT.

I’ve checked the old CSS and added one other line from that old snippet that seemed logical

.tainacan-photoswipe-layer .pswp\_\_bg {  
background-color: rgba(255, 255, 255, 1);

Now it is working, it there some other way?

And there are two more things I can not solve, (If it is better to make a new topic, I can)

1, I would like to remove the caption at the top of the screen when I’m in the zoom mode

 ![tainacan zoom 1](https://global.discourse-cdn.com/free1/uploads/tainacan/original/2X/e/e688f7840b54b43b462ded06785f246b0cb8276a.jpeg)

1. How can I remove this METADATA title

 ![tainacan 2](https://global.discourse-cdn.com/free1/uploads/tainacan/original/2X/e/ec47a7d90cff5148a3d761d68d2a3d71ef534021.jpeg)

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Agosto 25, 2022, 12:06pm UTC](https://tainacan.discourse.group/t/image-zoom-background-color-without-transparency/1047/5 "2022-08-25T12:06:16Z")

</div>

> [@Vedran\_Serbu](#):
>
> It works…BUT…the lightbox color option is back to black, although I’ve set lightbox color option to LIGHT.

Uhmm I’ll check what is wrong with that, may be a bug.

> [@Vedran\_Serbu](#):
>
> 1, I would like to remove the caption at the top of the screen when I’m in the zoom mode

If I am not wrong, there is an option in the customizer settings, that allows you do hide the image title in the lightbox. Could you try that?

> [@Vedran\_Serbu](#):
>
> 1. How can I remove this METADATA title?

Previously, this label was handled by themes. Now in 0.19 we have the possibility of having multiple metadata sections. Every metadata starts in the “default section” named “metadata”. So if want to change the name, you should go to your Collection’s Metadata page and edit the default metadata section name. You can leave it empty (I just checked that we are indicating that it is required, but is an error).

On a side note, if you are not seeing the Pencil icon for editing the default section, this is a capabilities issue that I found about last evening. Please tell me if this is the case (in a new topic, preferably), cause we have a temporary solution while that is not fixed.

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Agosto 25, 2022, 12:19pm UTC](https://tainacan.discourse.group/t/image-zoom-background-color-without-transparency/1047/6 "2022-08-25T12:19:16Z")

</div>

Uhmm there is definitely a bug with that gallery settings, I’m checking here if this is on the Tainacan side or in the Tainacan support for Blocksy side. 🤔

---

<div class="post-metadata">

**Author:** ![Vedran\_Serbu](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/vedran_serbu/32/218_2.png) [@Vedran\_Serbu](https://tainacan.discourse.group/u/Vedran_Serbu)\
**Post date:** [Agosto 25, 2022, 12:46pm UTC](https://tainacan.discourse.group/t/image-zoom-background-color-without-transparency/1047/7 "2022-08-25T12:46:41Z")

</div>

I’ll create a new topic, tnx 🙂

---

<div class="post-metadata">

**Author:** ![mateus.m.luna](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/mateus.m.luna/32/3_2.png) [@mateus.m.luna](https://tainacan.discourse.group/u/mateus.m.luna)\
**Post date:** [Agosto 25, 2022, 12:51pm UTC](https://tainacan.discourse.group/t/image-zoom-background-color-without-transparency/1047/8 "2022-08-25T12:51:34Z")

</div>

Hey can you try updating to version 0.1.17, which I just released? I believe it should to the trick:

> **[Tainacan Support for Blocksy](https://wordpress.org/plugins/tainacan-blocksy/)**
>
> A plugin for integrating Tainacan plugin pages with the amazing Blocksy theme.

---

<div class="post-metadata">

**Author:** ![vnmedeiros](https://yyz2.discourse-cdn.com/free1/user_avatar/tainacan.discourse.group/vnmedeiros/32/7_2.png) [@vnmedeiros](https://tainacan.discourse.group/u/vnmedeiros)\
**Post date:** [Outubro 27, 2023, 12:22pm UTC](https://tainacan.discourse.group/t/image-zoom-background-color-without-transparency/1047/9 "2023-10-27T12:22:12Z")

</div>


