Setting a Grayscale Background Image - Shiny R

Question

Tried to use this code in order to apply a grayscale filter to the background image of my R ShinyApp:

ui <- fluidPage(
  tags$style("body {background: url(http://www.katamon.co.il/pics/2014-15/game19Herzeliya/ARL_1787.jpg) no-repeat center center fixed; 
              background-size: cover;
              filter:grayscale(100%);}"),

  headerPanel(fluidRow(column(5,tags$h1(tags$strong("Injury Prevention Data Analysis"),
                               style = "font family:Lobster,cursive;
                                        color:white;background-color:black;
                                        text-align:center;")))),

  fluidRow(
    column(3,offset = 9,
           tags$img(src = "http://www.katamon.co.il/images/logo2015T.png",
                    height = 200,width = 230, align = "right"))),

What happens is that it filters the second image only.

Any body knows why?

score 1 · Answer 1 · edited May 23 '17 at 12:33

This is a CSS-related question, the problem is not specific to R or shiny. The problem in your example script is that the filter transformation is applied to every child (but not to the body it is defined in). Popular solutions focus on using overlays, which works by defining different CSS classes for background and content, and defining separate HTML elements for each. Another way to achieve the desired effect is to use CSS pseudo-elements:

library(shiny)

ui <- shinyUI(fluidPage(
  tags$head(
    tags$style(paste0(
      "body:before { ",
      "  content: ''; ",
      "  height: 100%; width: 100%; ",
      "  position: fixed; ",
      "  z-index: -1; ",
      "  background: url(http://www.katamon.co.il/pics/2014-15/game19Herzeliya/ARL_1787.jpg) no-repeat center center fixed; ",
      "  background-size: cover; ",
      "  filter: grayscale(100%); ",
      "  -webkit-filter: grayscale(100%); }"))),
  headerPanel(fluidRow(column(5, tags$h1(
    tags$strong("Injury Prevention Data Analysis"),
    style = "font family:Lobster,cursive;color:white;background-color:black;text-align:center;")))),
  fluidRow(column(3, offset = 9,
    tags$img(src = "http://www.katamon.co.il/images/logo2015T.png",
      height = 200,width = 230, align = "right")))
))

server <- shinyServer(function(input, output) {
})

shinyApp(ui = ui, server = server)

Note the -webkit-filter line: While it is redundant on modern browers, the built-in browser of my current installation of RStudio (v0.99.903) requires this to work.

Thanks! I actually fixed it using this line: filter(url(http://www.katamon.co.il/pics/2014-15/game19Herzeliya/ARL_1787.jpg),grayscale(1)) , but it works in safari, in chrome there is no background image at all when I use this code — Eyal Eliakim, Sep 22 '16 at 08:09
CSS filter _functions_ seem to be more on the cutting edge and may not be as widely supported as filter _properties_ yet. Any reason the proposed solution using the `body:before` pseudo-element does not work for you? — omahdi, Sep 22 '16 at 21:41

Setting a Grayscale Background Image - Shiny R

1 Answers1