picture as a background of shiny dashboard

Question

I would like to change background in my shiny dashboard App. I wound in internet function setBackgroundImage (https://rdrr.io/cran/shinyWidgets/man/setBackgroundImage.html). The problem is that I don't know were I should put that function in my app. In example is classic app, not dashboard.

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    setBackgroundImage(src = "http://wallpics4k.com/wp-content/uploads/2014/07/470318.jpg")
  )
)
server <- function(input, output) {}
shinyApp(ui, server)

Also it is possible to put leaflet map as a background?

Answer 1

You can do it with tags$img(), and specifying position attribute to absolute. Note that img tag have to be placed as first in dashboardBody:

...
  dashboardBody(
    tags$img(
      src = "http://wallpics4k.com/wp-content/uploads/2014/07/470318.jpg",
      style = 'position: absolute'
    ),
    ...
  )
...

It also accepts width and height parameters. You can also position your image with hspace and vspace parameters.

Answer 2

Now there is also the possibility to add shinydashboard = TRUE to the setBackgroundImage function.

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    setBackgroundImage(
      src = "https://www.fillmurray.com/1920/1080",
      shinydashboard = TRUE
    )
  )
  
)
server <- function(input, output) {}
shinyApp(ui, server)