Assistance needed with Webpage Card (Panel) and theme "Background-Image"

1

I added a Webpage card as a view on my dashboard. If I configure the View Type as Panel the card is surrounded by a white-colored empty space instead of my custom theme’s background-image. I’m guessing this has to do with the custom theme I’m using.

Could someone please take a quick look at my theme code: techleech.yaml to see what I need to change to display my background-image instead of empty white space in the screenshot below? Or, at least change the white color to different color?

Screenshot 03-10-2022 at 06.57.24 PM
Screenshot 03-10-2022 at 06.57.24 PM720×724 26.1 KB

2

It’s this:

  # Background colors          
  primary-background-color: "#1B1B1B"  # systemGray5 dark mode

So if you are not seeing that then the colour is coming from the webpage itself, which is overlaid over the background.

Or maybe it is because you have this commented out:

# ha-card-background: 'rgba(150, 150, 150, 0.1)'
3

I appreciate the 3 suggestions. Unfortunately, none of them fix the issue.

I ruled out the custom theme entirely by just using the Default Lovelace theme set to “dark” or “auto”. The white area still appears to be undefined. I tried changing the two items in the custom theme anyway (like you suggested); however, it changed to colors for other components in the theme. I even cleared the browser cache completely each time I made a change and restarted my web browser: Google Chrome.

The HTML code is extremely simple… Changing background-color:black only affects the black background. It doesn’t have any control over the white area.

So, what else could it be? Surely, there has to be a way to have control over the white “undefined” area. This should be easily reproducible.

log.html

<html>
    <head>
        <title>TEST</title>

    <div style='line-height:88%;font-weight:bold;font-family:monospace;font-size:12px;background-color:black;color:#A0BACB'>

    </head>
    <body>
    <br>
Date Result Title<br>
---- ------ -----<br>
03/09/22 InProgress Update for Windows 10 Version 21H2 for x64-based Systems (KB4023057)<br>
03/09/22 Succeeded Cumulative Update for Windows 10 Version 21H2 for x64-based Systems (KB5011487)<br>
03/09/22 Succeeded Windows Malicious Software Removal Tool x64 - v5.99 (KB890830)<br>
03/09/22 Succeeded .NET Core 3.1.23 Security Update for x64 Client (KB5012418)<br>
03/01/22 Succeeded Cumulative Update Preview for .NET Framework 3.5 and 4.8 for Windows 10 Version 21H2 for x64
(KB5010472)<br>
03/01/22 Failed 9NMPJ99VJBWV-Microsoft.YourPhone<br>
02/20/22 InProgress Update for Windows 10 Version 21H2 for x64-based Systems (KB4023057)<br>
02/11/22 Succeeded Cumulative Update for Windows 10 Version 21H2 for x64-based Systems (KB5010342)<br>
02/11/22 Succeeded Windows Malicious Software Removal Tool x64 - v5.98 (KB890830)<br>
02/11/22 Succeeded Cumulative Update for .NET Framework 3.5 and 4.8 for Windows 10 Version 21H2 for x64 (KB5009467)<br>
    <br>
    <br>        
    </body>
</html>
4

Hi! I know one year has passed, but since I encountered the same problem, I’m here to share my solution. I fixed this by adding the background color to the HTML body. I set the color suggested by @tom_l . So your fixed code should look like this:

<html>
    <head>
        <title>TEST</title>

    <div style='line-height:88%;font-weight:bold;font-family:monospace;font-size:12px;background-color:black;color:#A0BACB'>

    </head>
   <body style="background-color:#1B1B1B;text-align:center">
    <br>
Date Result Title<br>
---- ------ -----<br>
03/09/22 InProgress Update for Windows 10 Version 21H2 for x64-based Systems (KB4023057)<br>
03/09/22 Succeeded Cumulative Update for Windows 10 Version 21H2 for x64-based Systems (KB5011487)<br>
03/09/22 Succeeded Windows Malicious Software Removal Tool x64 - v5.99 (KB890830)<br>
03/09/22 Succeeded .NET Core 3.1.23 Security Update for x64 Client (KB5012418)<br>
03/01/22 Succeeded Cumulative Update Preview for .NET Framework 3.5 and 4.8 for Windows 10 Version 21H2 for x64
(KB5010472)<br>
03/01/22 Failed 9NMPJ99VJBWV-Microsoft.YourPhone<br>
02/20/22 InProgress Update for Windows 10 Version 21H2 for x64-based Systems (KB4023057)<br>
02/11/22 Succeeded Cumulative Update for Windows 10 Version 21H2 for x64-based Systems (KB5010342)<br>
02/11/22 Succeeded Windows Malicious Software Removal Tool x64 - v5.98 (KB890830)<br>
02/11/22 Succeeded Cumulative Update for .NET Framework 3.5 and 4.8 for Windows 10 Version 21H2 for x64 (KB5009467)<br>
    <br>
    <br>        
    </body>
</html>