Image via CSS

[Pascal]

I already asked this on stackoverflow but I nobody was answering. So, I'm trying my luck here...

I'm trying to add an image to my Shiny application (set up with shiny dashboard) that resides in a box and automatically resizes with the box.

I thought this could be done with some HTML/CSS tricks and found Scale image to fit a bounding box. Thus, I created a custom.css in a www folder in my app and added the following CSS

.someimage {
  background-image: url('someimage.png');
  background-repeat: no-repeat;
  background-size: contain;
}
.main-header .logo {
  font-family: "Georgia", Times, "Times New Roman", serif;
}

with someimage.png residing in the same place. The application looks like

ui.R

# UI
library(shiny)
library(shinydashboard)
dashboardPage(
  dashboardHeader(title = "Title"),
  dashboardSidebar(),
  dashboardBody(
    tags$head(
      tags$link(rel = "stylesheet", type = "text/css", href = "custom.css")
    ),
    box(title = "Some image",
        tags$div(class = 'someimage')
    )
  ))

server.R

# Server
shinyServer(function(input, output) {})

As a test I also altered the header font, which does get changed into serif. Furthermore, when I open the developer tools in Chrome and look for it I find the correct div and css class.

I also found Embedding Image in Shiny App but it didn't really help.

Would be very happy if someone could help.

Thanks in advance,

Cheers,

Pascal

[Joshua Spiewak]

Hi Pascal,

This sounds like a general shiny question, could you re-post on shiny-discuss? This group is specifically for hosting your shiny applications on shinyapps.io

[Pascal]

Oh, sorry about that. Will do.