Lovelace Background No Longer Shows Under Transparent Header

[stmrocket]

Checklist

• [x] I have updated to the latest available Home Assistant version.
• [x] I have cleared the cache of my browser.
• [x] I have tried a different browser to see if it is related to my browser.

The problem

Prior to 2020.12.0, adding transparency to the header using a theme would result in the Lovelace background showing through the header. After upgrading, the background appears to start below the header even with header transparency.

Expected behavior

The header will change to the specified transparency and the Lovelace background will show through.

Steps to reproduce

1. Set app-header-background-color and app-toolbar-background-color to have transparancy in the current theme.
2. Add a background to the Lovelace view.
3. reload themes and view.

Environment

• Home Assistant release with the issue: 2020.12.0 (20201212.0)
• Last working Home Assistant release (if known): 0.118.5 (20201111.2)
• Browser and browser version: Chrome 87.0.4280.88
• Operating system: Windows 10

State of relevant entities

Not Applicable

Problem-relevant configuration

From theme:

midnight:
  app-header-background-color: "rgba(150,150,150,0.2)"
  app-toolbar-background-color: none

Background image from ui-lovelace:

background: center / cover no-repeat url("/local/lovelace/background_19.png") fixed

Javascript errors shown in your browser console/inspector

None shown.

Additional information

Header as shown in Frontend 20201111.2:

Header as shown in 20201212.0:

The view icons are different as the 20201111.2 image was taken from a system running the same theme / background configuration but not yet upgraded.

[blhoward2]

I am seeing this behavior as well. I used to set the header background as transparent and then draw a background image across the whole screen. Now the header will go transparent but the image is not drawn behind the header.

[spider7611]

Have the same problem before have transparent but now it is not working after update. If scroll down see transparent:

[Karstensson]

I have the same issue. 118.5 worked well and all releases after that has broken this.

[peter-dolkens]

Another person here who was enjoying transparent title bar and is now looking for a solution

[panhans]

If someone is interested in a workaround with card-mod simply put this to your theme. Don't forget to edit the theme name, delete the background in your views and put it in the css code. (background-image)

card-mod-theme: YOURTHEMENAME

card-mod-root: |
  hui-view {
    background: none !important;
  }
  ha-app-layout {
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-image: url("/local/images/wallpaper/background.png") !important;
    background-attachment: fixed !important;
  } 

[fenster24]

I am having the same issue. Adding the code suggested by panhans to my theme had no impact (I changed the theme name and also the background image url). Still not transparent until scrolling.

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[fenster24]

The issue persists in Home Assistant Core 2021.7.2.

[Giuliointhetube]

The issue persists in Home Assistant Core 2021.8.8

[Joe3n]

Issue is still there with 2021.9.7

[renegaed]

Issue is still there for me. Very frustrating. 2021.10.4

[liquidthex]

Issue persists in HA Core 2021.11.5 Would really like a HA that doesn't look totally horrible.

[Pixelpaule]

Issue persists in HA Core 2022.2.1

[snarlingllama]

Any update on this? Issue still persists on HA Core 2022.2.9.

[kongjudas]

2022.4.7 seems to hold on to the problem

[tYn0]

Any update on the issue? Still broken in 2022.6.6 :(

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

[stmrocket]

The issue persists in Home Assistant Core 2022.9.5

[yjamal01]

2022.11 and issue persists

[dampflok2000]

The issue persists in Home Assistant Core 2022.12.6

[kahancock]

2023.2.5 and issue persists

[yjamal01]

Now I can no longer get transparent header at all

[JOHLC]

ITS WORKINGGG!!! 👍🏼

[blhoward2]

ITS WORKINGGG!!! 👍🏼

How are you doing it? Please provide some detail...

[JOHLC]

ITS WORKINGGG!!! 👍🏼

How are you doing it? Please provide some detail...

I am using this theme: https://github.com/JOHLC/transparentblue

[blhoward2]

Weird, applying that theme mine is still not transparent. Are you applying any other code with card-mod outside the theme?

[JOHLC]

Weird, applying that theme mine is still not transparent. Are you applying any other code with card-mod outside the theme?

Are you on the latest version of Home Assistant? Also note: You have to scroll down one for it to show like that.

[yjamal01]

Previously with 2023.4 it was opaque, even if I scrolled down. I can confirm that is no longer the case, not using that theme but the ios dark theme and google dark theme. I can scroll and the header is transparent, however I still have not managed to extend the background under the header.

I realize that was the original issue, but in 2023.4 it broke to the point where the header was not transparent even when scrolling.

[blhoward2]

I was able to make the header transparent but still cannot get the background to show under the header, which was the point of this issue. Your theme is loading a separate header background in only that section as far as I can tell…Sent from my iPadOn May 10, 2023, at 1:44 PM, Joel @.***> wrote:

Weird, applying that theme mine is still not transparent. Are you applying any other code with card-mod outside the theme?

Are you on the latest version of Home Assistant? Also note: You have to scroll down one for it to show like that.

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: @.***>

[github-actions[bot]]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.