Opacity for background image

  • Resolved carmichaeldb

    (@carmichaeldb)


    5 years, 8 months ago

    Is there anyway to set the opacity to the background image via CSS? I have been trying to figure this one out but haven’t been able to get anything to work as I need. The images in the background have various colours and can make the text harder to read, so I need to add some opacity or some sort of overlay to the background image to make the text easier to read. I can just edit the images themselves but I was hoping to make it more dynamic so if the client decides to change the images they can just replace them without having to edit anything.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author simonpedge

    (@simonpedge)

    Unfortunately, with CSS there is no option to set the opacity of a background image. But there may be a possible workaround – see this tutorial:
    https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity

    So instead of using slide backgrounds, add an image (IMG tag) to the slide content.

    And then use the following CSS:

    #SLIDER_ID .owl-item img {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: auto;
   opacity: 0.6;
}

    (replace ‘#SLIDER_ID’ with the CSS ID of your slider)

    • This reply was modified 5 years, 8 months ago by simonpedge.
    • This reply was modified 5 years, 8 months ago by simonpedge.
    Plugin Author simonpedge

    (@simonpedge)

    Hi, am marking this resolved as I have not heard back from you on this.
    I hope that the solution I provided helped you out – thank you for using Slide Anything ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Opacity for background image’ is closed to new replies.

Tags