stmrocket commented 3 years ago

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

Set app-header-background-color and app-toolbar-background-color to have transparancy in the current theme.
Add a background to the Lovelace view.
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 commented 3 years ago

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 commented 3 years ago

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

Karstensson commented 3 years ago

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

peter-dolkens commented 3 years ago

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

panhans commented 3 years ago

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 commented 3 years ago

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] commented 3 years ago

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 commented 3 years ago

The issue persists in Home Assistant Core 2021.7.2.

Giuliointhetube commented 3 years ago

The issue persists in Home Assistant Core 2021.8.8

Joe3n commented 3 years ago

Issue is still there with 2021.9.7

renegaed commented 3 years ago

Issue is still there for me. Very frustrating. 2021.10.4

liquidthex commented 2 years ago

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

Pixelpaule commented 2 years ago

Issue persists in HA Core 2022.2.1

snarlingllama commented 2 years ago

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

kongjudas commented 2 years ago

2022.4.7 seems to hold on to the problem

tYn0 commented 2 years ago

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

github-actions[bot] commented 2 years ago

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 commented 2 years ago

The issue persists in Home Assistant Core 2022.9.5

yjamal01 commented 1 year ago

2022.11 and issue persists

dampflok2000 commented 1 year ago

The issue persists in Home Assistant Core 2022.12.6

kahancock commented 1 year ago

2023.2.5 and issue persists

yjamal01 commented 1 year ago

Now I can no longer get transparent header at all

JOHLC commented 1 year ago

ITS WORKINGGG!!! 👍🏼

blhoward2 commented 1 year ago

ITS WORKINGGG!!! 👍🏼

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

JOHLC commented 1 year ago

ITS WORKINGGG!!! 👍🏼

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

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

blhoward2 commented 1 year ago

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

JOHLC commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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] commented 10 months ago

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.

ncodee commented 9 months ago

3 years on-going issue, any updates on this please?

ExodusOTH commented 8 months ago

Bumping this. Have not found a way to make the header transparent in-app

Bergasha commented 7 months ago

done

And his done it ladies and gentlemen, Ill post my yaml below for everyone.

`Google-Dark-Theme: card-mod-theme: Google-Dark-Theme header-height: 45px card-mod-root: |

view {

  background: url('/local/colour.png') fixed;
  background-size: cover;
  margin-top: auto !important;
  height: calc(100vh - env(safe-area-inset-top)) !important;
}
.header {
  background: rgba(20,20,20,0.1) !important;
}

card-mod-view-yaml: | .: | hui-view { background: none !important; } hui-masonry-view { padding-top: var(--header-height); }

Global

app-header-text-color: 'rgba(255, 184, 5, 1)' app-header-text-color: "white" lovelace-background: 'center / cover no-repeat url("/local/colour.png") fixed' app-header-background-color: 'rgba(1, 87, 140, 0.1)' primary-color: "#209cee" light-primary-color: "#B6B6C1" primary-background-color: "#212121" secondary-background-color: rgba(25, 25, 25, 0.7) divider-color: var(--primary-background-color) accent-color: rgba(255, 159, 9, 1) modes: light: {} dark: {}`

fenster24 commented 7 months ago

@Bergasha This looks great! I haven't worked with card mod before, is this a required custom component? Also, which version of Home Assistant Core are you running?

Bergasha commented 7 months ago

@fenster24 it is a requirement mate, just install it in Hacs. I'm running version 2024.3.0

fenster24 commented 5 months ago

After upgrading to the latest today, my transparent header now works! I didn't make any changes, or add any card mods.

Core 2024.5.3

Supervisor 2024.05.1

Operating System 12.3

Frontend 20240501.1

home-assistant / frontend

Lovelace Background No Longer Shows Under Transparent Header #7974

Checklist

The problem

Expected behavior

Steps to reproduce

Environment

State of relevant entities

Problem-relevant configuration

Javascript errors shown in your browser console/inspector

Additional information

view {

Global