7

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?

dasti74
  • 219
  • 3
  • 11

2 Answers2

7

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.

Paweł Chabros
  • 2,349
  • 1
  • 9
  • 12
  • 1
    but its like element, I would like to have picture as a background and have possibility to put elements (like boxes) on it. – dasti74 Feb 07 '19 at 08:30
  • @dasti74 I've edited my answer. Check it and let me know if this is what you want. – Paweł Chabros Feb 07 '19 at 08:40
  • it works, thanks! I have one more question. Do you know if it is possible to use leaflet map as a background? In other words, instead of putting the link in, place the leafletoutput object – dasti74 Feb 07 '19 at 08:47
  • You can't put leafletoutput object in img tag for sure. But I think you can wrap it with simple `div` and add `style = 'position: absolute'`. – Paweł Chabros Feb 07 '19 at 08:50
  • 2
    Ok. I figured it out. You have to do this with css. 1. Place `tags$head(tags$link(rel = "stylesheet", type = "text/css", href = "style.css"))` as first in `dashboardBody`. 2. Place `leafletOutput('myMap')` as second in `dashboardBody`. 3. Create folder named `www` in the same directory as your shiny app file. 4. Create `style.css` file with the following content: `#myMap { position: absolute; }` in the `www` folder. Everything you will put after `leafletOutput` will be placed on the map. – Paweł Chabros Feb 07 '19 at 09:20
  • you are awesome! – dasti74 Feb 07 '19 at 09:37
  • Thanks :D I'm glad I could help :) – Paweł Chabros Feb 07 '19 at 09:38
4

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)
PeterD
  • 1,331
  • 12
  • 22