# Container background image changes font colors

**URL:** <https://community.glideapps.com/t/container-background-image-changes-font-colors/77095>\
**Category:** Ask for Help\
**Created:** [October 14, 2024, 6:55pm UTC](https://community.glideapps.com/t/container-background-image-changes-font-colors/77095 "2024-10-14T18:55:27Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fair\_Currents](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fair_currents/32/80302_2.png) [@Fair\_Currents](https://community.glideapps.com/u/Fair_Currents)\
**Post date:** [October 14, 2024, 6:55pm UTC](https://community.glideapps.com/t/container-background-image-changes-font-colors/77095/1 "2024-10-14T18:55:27Z")

</div>

1. Create a new app
2. Created a new navigation screen
3. added a container to the new screen
4. add a Title component - Simple to the container

 ![Slide1.PNG](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/e/ee5608c90d70faedf637cbf94345ac6681ee6ce2.jpeg)

When I select image for the container background the font color changes.

 ![Slide2.PNG](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/2/f21d83dd41b4dcebf9ff61d958d9b48b966820d7.jpeg)

Is it supposed to do this? Is there a way to stop it?

all help appreciated

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [October 14, 2024, 7:22pm UTC](https://community.glideapps.com/t/container-background-image-changes-font-colors/77095/2 "2024-10-14T19:22:16Z")

</div>

It’s not great, but yes that is expected. When using an image as a background, I think it’s assuming that the image will be dark, so it lightens the text color to compensate. I don’t believe it actively analyzes the image colors to adjust font colors accordingly. It just overrides to white text.

I think your options are to use a darker image, explore the other background options, or else you need to start getting into CSS to manually override font colors.

---

<div class="post-metadata">

**Author:** ![Fair\_Currents](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/fair_currents/32/80302_2.png) [@Fair\_Currents](https://community.glideapps.com/u/Fair_Currents)\
**Post date:** [October 14, 2024, 8:08pm UTC](https://community.glideapps.com/t/container-background-image-changes-font-colors/77095/3 "2024-10-14T20:08:46Z")

</div>

Yea, I feared as much. I went down the CSS path, but it adds a lot of fragility. Darn.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [October 14, 2024, 11:50pm UTC](https://community.glideapps.com/t/container-background-image-changes-font-colors/77095/4 "2024-10-14T23:50:39Z")

</div>

> [@Fair\_Currents](#):
>
> I went down the CSS path, but it adds a lot of fragility

Can you explain why so? Can we help you set this up?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 15, 2024, 12:31am UTC](https://community.glideapps.com/t/container-background-image-changes-font-colors/77095/5 "2024-10-15T00:31:28Z")

</div>

> [@Fair\_Currents](#):
>
> When I select image for the container background the font color changes.

See what happens with this setup.

 ![Screenshot 2024-10-15 at 07.28.07](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/a/9/a93a60b772f41cac725adf127178b072f2b19243.png)