Background image for bulmaHero?

[Jorge-hercas]

Hi and thanks for reading me. Is it possible to put a background image instead of a single color in bulmaHero?

[marcin-karlinski]

Similar to the answer here https://github.com/jgthms/bulma/issues/1007 , as a workaround you can add a class to the bulmaHero let's say ('has-bg-img') and then in CSS add the following line:

.has-bg-img { background: url('link/to/image.png')center center; background-size:cover; }

Working example:

if(interactive()){
  library(shiny)

  ui <- bulmaPage(
    tags$head(
      tags$style(HTML("
.has-bg-img { background: url('https://shiny.rstudio.com/blog/images/shiny-thumb.png')center center; background-size:cover; }
"
      ))
    ),
    bulmaHero(
      fullheight = TRUE,
      color = "danger",
      bulmaHeroBody(
        bulmaContainer(
          bulmaTitle("Hello Bulma*"),
          bulmaSubtitle("shinybulma*")
        )
      ),
      class = "has-bg-img"
    )
  )

  server <- function(input, output){}

  shinyApp(ui, server)
}