Title: Transparent Background Image
Last modified: May 21, 2018

---

# Transparent Background Image

 *  Resolved [codeforweb](https://wordpress.org/support/users/codeforweb/)
 * (@codeforweb)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/transparent-background-image-2/)
 * 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](https://wordpress.org/support/users/afterimagedesigns/)
 * (@afterimagedesigns)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/transparent-background-image-2/#post-10321242)
 * 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](https://wordpress.org/support/users/codeforweb/)
 * (@codeforweb)
 * [7 years, 11 months ago](https://wordpress.org/support/topic/transparent-background-image-2/#post-10337180)
 * Thank you for the help [@afterimagedesigns](https://wordpress.org/support/users/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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/wp-bootstrap-starter/3.3.6/screenshot.
   png)
 * WP Bootstrap Starter
 * [Support Threads](https://wordpress.org/support/theme/wp-bootstrap-starter/)
 * [Active Topics](https://wordpress.org/support/theme/wp-bootstrap-starter/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/wp-bootstrap-starter/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/wp-bootstrap-starter/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [codeforweb](https://wordpress.org/support/users/codeforweb/)
 * Last activity: [7 years, 11 months ago](https://wordpress.org/support/topic/transparent-background-image-2/#post-10337180)
 * Status: resolved