Transparent Background Image

  • Resolved codeforweb

    (@codeforweb)


    6 years, 6 months ago

    I am trying to add an image with opacity as 0.4 but it does not work.

    In other forum, I was reading about adding transparent background image to a theme and I came across this css

    #content.site-content{
    background: rgba(255,255,255,0.4);
    }

    but when I add this CSS my background image dissapears.
    Any ideas on how to achieve this?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author Afterimage Designs

    (@afterimagedesigns)

    Hi Codeforweb,

    Thank you for using WP Bootstrap Starter, may I get your website URL and where exactly you want to add a transparent background image?

    The CSS code you have posted will not make the background image transparent, instead it will make the background color transparent. To create a transparent background image there are 2 ways,

    Option 1:
    Using a photoshop reduce the transparency pf the image then apply it to the page.

    Option 2:
    Create a HTML code like this

    <div class="sample-div">
<div class="transpa-bg"><img src="image/source.jpg"></div>
<div class="content">Your content HERE</div>
</div>

    then add css code

    .sample-div {
  position: relative;
}
.transpa-bg{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100;
  opacity: 0.5;
}
.content {
  position: relative;
  z-index: 10;
}

    Hope my sample code will help. Have a nice day ??

    Thread Starter codeforweb

    (@codeforweb)

    Thank you for the help @afterimagedesigns

    I did it by reducing the opacity of my background image in Adobe Photoshop.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Transparent Background Image’ is closed to new replies.