How to change the alpha/transparency of the background image in shinydashboard ?

shiny
1

Is there a way we can reduce the intensity of the rendered image because if
we add buttons or rendered the datatable on the DashboardBody,
text or column header is hardly visible on top of this image.

Can we make this image dimmer or reduce the alpha to make it more transparent ?

Relevant links:

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$img(src = "https://www.pngfind.com/pngs/m/461-4619276_hello-lettering-hd-png-download.png",
                       style = 'position: absolute')
  )
)
server <- function(input, output) {}
shinyApp(ui, server)
2

Hi,

This is an easy fix with one extra line of CSS:

library(shiny)
library(shinydashboard)
library(shinyWidgets)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$img(src = "https://www.pngfind.com/pngs/m/461-4619276_hello-lettering-hd-png-download.png",
             style = 'position: absolute; opacity: 0.2;')
  )
)
server <- function(input, output) {}
shinyApp(ui, server)

Adjust the opacity of value in the style argument to any you like (0 = completely transparant, 1 = completely opaque)

Hope this helps,
PJ

1 Like
3

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