Search code examples
cssrshinysetbackground

Easiest way to set different background images to shiny panels

I would like to know what was the easiest way to set up a different image to each of my 3 shiny main tabpanels ?

I thought that using setBackgroundImage(src = "image1.jpg", shinydashboard = TRUE), setBackgroundImage(src = "image2.jpg", shinydashboard = TRUE), etc. in each of them would do the trick but unfortunately it is not that simple.

I guess I shall use some CSS but I'm very new to this and I didn't find a solution to my problem yet.

Any guess about how I should do that ?

Minimal app:

library(shiny)
library(shinyWidgets)

ui <- shinyUI(navbarPage(id="Test", "TEST",
                         header = tagList(
                           useShinydashboard()
                         ),
                         tabPanel(
                           "Welcome", value="welcome",
                           verbatimTextOutput("text1")),
                         tabPanel(
                           "Tab1", value="first_tab",
                                    verbatimTextOutput("text2")),
                   tabPanel(
                     "Tab2", value="second_tab",
                     verbatimTextOutput("text3"))))
                   
server <- shinyServer(function(input, output, session){
 
  output$text1 <- renderText("Trying to set up a first background image in this whole panel")
  output$text2 <- renderText("Trying to set up a second background image in this whole panel")
  output$text3 <- renderText("Trying to set up a third background image in this whole panel")
  
  
})

shinyApp(ui, server)
Solution

  • You can use the CSS background-image Property to achive this:

    library(shiny)
library(shinyWidgets)

# remove /* ... */ to use the arguments

backgroundImageCSS <- "/* background-color: #cccccc; */
                       height: 91vh;
                       background-position: center;
                       background-repeat: no-repeat;
                       /* background-size: cover; */
                       background-image: url('%s');
                       "

ui <- shinyUI(navbarPage(id="Test", "TEST",
                         header = tagList(
                           useShinydashboard()
                         ),
                         tabPanel(
                           "Welcome", value="welcome",
                           verbatimTextOutput("text1"),
                           style = sprintf(backgroundImageCSS,  "https://images.plot.ly/language-icons/api-home/r-logo.png")
                         ),
                         tabPanel(
                           "Tab1", value="first_tab",
                           verbatimTextOutput("text2"),
                           style = sprintf(backgroundImageCSS, "https://images.plot.ly/language-icons/api-home/matlab-logo.png")
                         ),
                         tabPanel(
                           "Tab2", value="second_tab",
                           verbatimTextOutput("text3"),
                           style = sprintf(backgroundImageCSS, "https://images.plot.ly/language-icons/api-home/python-logo.png")
                         )
))

server <- shinyServer(function(input, output, session){
  output$text1 <- renderText("Trying to set up a first background image in this whole panel")
  output$text2 <- renderText("Trying to set up a second background image in this whole panel")
  output$text3 <- renderText("Trying to set up a third background image in this whole panel")
  })

shinyApp(ui, server)

    result

    When using local images store them into a www folder (subdirectory of your app folder) or use addResourcePath to add the images as static resources to Shiny's web server,

    Also see this related answer.