How to put images in background of Shiny FluidRow Column

shiny
#1

I have a Shiny app like the below:

library(tidyverse)
library(shiny)

ui <- fluidPage(
  
  titlePanel("Hello Shiny!"),
  
  fluidRow(
    
    column(4,
           sliderInput("obs", "Number of observations:",
                       min = 1, max = 1000, value = 500)
    ),
    
    column(8,
           plotOutput("distPlot")
    )
  )
)

server <- function(input, output) {
  
  
}

shinyApp(ui = ui, server = server)
#> 
#> Listening on http://127.0.0.1:6857

672×563 9.42 KB

Created on 2020-03-08 by the reprex package (v0.3.0)

I would like to have an image behind the sliderInput such that the sliderInput is visible on top of the image.

Would love any help! Thanks.

#2

Hi @ivelasq3,

I think adding a little CSS is probably the best way to add that sort of styling:

library(tidyverse)
library(shiny)

ui <- fluidPage(
  
  titlePanel("Hello Shiny!"),
  
  fluidRow(style = "background-image: url(https://images.unsplash.com/photo-1583542225715-473a32c9b0ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80); background-size: cover;",
    
    column(4,
           sliderInput("obs", "Number of observations:",
                       min = 1, max = 1000, value = 500)
    ),
    
    column(8,
           plotOutput("distPlot")
    )
  )
)

server <- function(input, output) {
  
  
}

shinyApp(ui = ui, server = server)
1 Like
#3

If you want it just behind the slider and not the whole fluid row...

library(tidyverse)
library(shiny)

ui <- fluidPage(
  
  titlePanel("Hello Shiny!"),
  
  fluidRow(
    column(4,
           sliderInput("obs", "Number of observations:",
                       min = 1, max = 1000, value = 500),
           style = "background-image: url(https://images.unsplash.com/photo-1583542225715-473a32c9b0ef?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80); background-size: cover;"
    ),
    
    column(8,
           plotOutput("distPlot")
    )
  )
)

server <- function(input, output) {
  
  
}

shinyApp(ui = ui, server = server)
1 Like
#4

Perfect! Thank you so much.

1 Like
#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.