Using image as full background of headerPanel in Shiny App

[hapigolucki]

I am attempting to use an image in my www directory to span the full background of my headerPanel. I have my headerPanel title in headerPanel(h1("Title") then I am attempting to set my picture to the full background of the headerPanel. However, I cannot figure out how to size the picture to span the whole headerPanel.(Picture is in the www directory)

I have tried these two things, and both (no matter how I change the dimensions) I cannot get it to span the whole panel.

shinyApp(
  ui = fluidPage(
    headerPanel(
      h1("Title", align = "center", style = "color: white", img(src="picture.jpeg", height  = 250, width = 250))),

and

  ui = fluidPage(
         tags$head(
           tags$style(
             "
             .title
             {
              background-image:url('picture.jpeg');
              background-repeat: no-repeat;
              background-size: 60% 200%;
            }
            "
           )
          ),
         headerPanel(
            h1("Title", class = "title")),

Don't mind the random dimensions, I messed around with them so much that I don't remember which ones I started with. Is there a way that I can just get the picture to span all of the columns of the headerPanel?

[cpsievert]

As a word of caution, I'm no a HTML/CSS expert, but this is how I would approach it

I don't think headerPanel() is going to be appropriate for your use case because title is always wrapped in a <h1> tag (and thus limits our ability to overlay/underlay an image).

> shiny::headerPanel
function (title, windowTitle = title) 
{
    tagList(tags$head(tags$title(windowTitle)), div(class = "col-sm-12", 
        h1(title)))
}

We could write a similar function though that allows us to put an image behind the title text

library(shiny)
library(htmltools)

# with help from https://stackoverflow.com/a/18447818/1583084
headerImagePanel <- function(title, src) {
  div(
    style = "display: inline; position: relative",
    img(
      src = src, 
      style="width:100%; max-width:100%; position: absolute; z-index:-1;"
    ),
    h1(title, style="display: inline;")
  )
}

ui <- fluidPage(
  headerImagePanel("title", "https://www.jonathan-petitcolas.com/img/posts/ascii-art-converter/homer.png")
)

server <- function(input, output) {}

shinyApp(ui, server)