Making background image fit extents of dashboard

[markjsmith]

Hi, loving this dashboard and the way you have set the sizes by no of pixels. I’m having an issue though, the background loads at full screen size and then the dashboard loads over the top, but is larger than the background so you rescale the page to see the full dash, easy enough, and then the background does not resize. I can’t seem to find any css to set the background to the extents of the webpage and not the screen size, and making my image larger doesn’t solve it. Any clues?

[AZSupra]

Sorry I was out of town when you posted this.

What resolution are you trying to view it at? The background image in my repository is 1024x600 since that's the resolution of the Fire 7 tablet i'm using. I set background-size: cover in the css which tries to preserve the aspect ratio of the background so that may be the culprit.

I also set columns: 1024 in the Main.dash file. I would first try to change that to match the horizontal resolution of your display and see if it helps.

If your horizontal resolution is less than 1024 you would also need to change the width of the widgets in top_panel.yaml and bottom_panel.yaml so they don't exceed your resolution.

If your horizontal resolution is greater than 1024 and you want to use the same background I can send you a slightly larger version of the image that is 1408x805. You could then crop it to potentially fit a little better.

Even though defining the grid spaces as the number of pixels gives the most flexibility it also means that you pretty much have to redefine all the sizes if your display is different. Hope that helps! Let me know if you have any other questions.

[AZSupra]

Just found a larger 1950x1300 version of the wallpaper here: http://rushiwork.oss-cn-beijing.aliyuncs.com/works/201102/1a5ecba4.jpg

[markjsmith]

Thanks for the feedback! I had not considered my iPad having a smaller no of pixels, when it loads, it’s larger than the screen, when I zoom out, the background (I’m actually using a different one)ends up covering only about half the screen. So I need to size down the widgets and header and footer? I’ll give it a try. Had already played a little to add a refresh at the top and split the footer too. Thanks for your help. Mark Get Outlook for iOS<https://aka.ms/o0ukef>

…

________________________________ From: AZSupra <[email protected]> Sent: Thursday, February 21, 2019 19:43 To: AZSupra/HADashboard-Blur-Theme-Light Cc: markjsmith; Author Subject: Re: [AZSupra/HADashboard-Blur-Theme-Light] Making background image fit extents of dashboard (#2) Just found a larger 1950x1300 version of the wallpaper here: http://rushiwork.oss-cn-beijing.aliyuncs.com/works/201102/1a5ecba4.jpg — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#2 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AmDUHNyambnHY4x0YqEhAo8MIUtDmlGLks5vPvbrgaJpZM4a9bgg>.

[AZSupra]

Which iPad model do you have? Do you know what the dimensions of your background image are? I'm wondering if you're using an image that is smaller than the resolution of your iPad since they are like 2048x1600 or something huge like that.

[markjsmith]

It's 4288x2848, not quite the right shape but fills when page loads but I only get part of the dashboard visible, so I pinch and zoom out and the background only covers about half from the top left corner. I'll send some screen shots Mark

[markjsmith]

Here are 2 screenshots, initial load and zoomed out. Tried it in safari and chrome, both the same. I need to improve the font sizes still yet. [Image] [Image]

[AZSupra]

Hmm i don't see the images for some reason. Can you try to attach them again?

[markjsmith]

Not forgotten you, need to log in from my laptop as I can’t find a way to do it by email or on my iPad.... please bear with me :-)