Image in Shiny via CSS

Question

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

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 I find the correct div and css class.

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

Are you able to just call the image in an HTML() wrapper? So instead of placing your image in the CSS markup, actually load it in HTML. Something like HTML(""). Bootstrap (which is the CSS framework that shiny is built with) has a class called img-responsive that may help. See here: http://getbootstrap.com/css/#images — Bogdan Rau, Jul 19 '16 at 15:18

Image in Shiny via CSS

0 Answers0