Sugestions on what can I use to develop this app

[Valholy]

...Good day,Im trying to create an app using an image in the background as a layout, thinking about the pros and cons of this I think that whenever this background gets scaled depending on which device is used to display it it can get all messed up. So I think the solution might be using some kind of element in which I can insert said image using predefined size to prevent it getting scaled incorrectly, this image has labels, titles etc. in it , so the second problem would be what can I use to display information in front of those labels specifying the location where I want this element to show.

thanks a lot in advance

[woodward]

You will need to provide some pictures or code, it's hard to understand what you mean.

[Valholy]

thats the picture , in front of those titles I have to show some information that Im going to download through sql, I need recomendations on what kind of elements can I use to place them exactly where I need in the picture and what can I do to prevent this layout from scaling incorrectly, I also have to show some graphs on the last squares

[woodward]

Check out this post. You should probably search around a bit first and see what other people have done. Just search "web app with background image"

Background images in shiny

Hi - CSS Grid and flexbox are your best friends for a 2 x2 layout with content placed on top. In terms of the structure, wrap two div elements (children) in a parent div (for demonstration, I've assigned classes. You may want to use a naming system that makes sense for you). One child element will have all of the background images and the other has the content. In shiny language, it would look like this: ... # parent tags$div(class="landing-wrapper", # child: images tags$div(class="landing-block background-content", ...images go here.. ), # child: content (that will be placed on top of the images) tags$div(class="landing-block foreground-content", ...content goes her…

[Valholy]

I did research, but if you notice my question is focused on how to prevent that background image and its elements positioned correctly when scaling the window where its been viewed not about how to put a background image perse, thats why Im asking for sugestions because I havent found anything about it.

[nteetor]

Hello @Valholy, if you are looking to build a Shiny application with a more flexible layout I suggest the yonder package. I built the package, in part, to tackle situations like these.

You would most likely be interested in the container(), columns(), column(), and flexbox() functions. Flex box is a CSS layout system and is quite powerful. An introduction to flex box can be found here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox. The yonder::flexbox() function is a helper function to apply flex box styling to elements of an application. I tried to make the ?flexbox help page accessible for new developers, so check out the page in addition to any online resources.

You might also like the height() and width() utilities to help specify fixed or relative element sizes.

[Valholy]

thanks a lot!! will take a look into it