Adding Opacity to sidebar background in Twenty Fifteen

Not sure if you are still looking for an answer, but here is what I found when I was trying to do the same thing:

Now you want the background of that div to be transparent, but not the text – this requires using an RGBa value for the background of the div. From time to time you may use RGB values for setting colours in your CSS (e.g. rgb(170, 187, 97)), an RGBa value simply adds an alpha-transparency value to that code, so the CSS class for the example div is:

.container {
background: rgb(170, 187, 97); /* Fallback */
background: rgba(170, 187, 97, 0.5);

From: https://www.hughlashbrooke.com/2011/12/making-a-semi-transparent-background-behind-opaque-text-in-css/

Thanks for the input! I experimented with some background colors, and see how it can work.

I am wanting my page background image to “show through” the sidebar, and have not been able to accomplish that. But I will spend more time on it when I get a chance.

I will add to this thread when I have more to contribute. Thanks again!

The problem with sidebar background in twentyfifteen resides in body:before that has the width of the sidebar and a white background.
This should do it:

body:before {
   background-color: transparent;
}

Hi Angoo … this was the solution! It did the trick! I am so glad, and thank you!

This worked really well to make the background picture be seen on the left side of the page. Unfortunately, i used a darker image with white lettering and when I shrunk browser or used a phone, the title wouldn’t show up against a white background.

What I did was in addition to what angoo recommended, enter

.site-header {
   background-color: transparent;
}

into my child theme. Now the header, when it is shrunk to table/mobile size is transparent also.

Thank you so much for this. Helped a lot.

I used the following code.

.site-header {
    background-color: transparent;
    border: 0px;
}

Just a quick note you need to change your header/sidebar background to default in order for this to work.

i added this to my child style.css and worked for me.

body:before{
   content: none;
}