make page color transparent in Twenty Sixteen theme

Add

.site {
	background-color: transparent;
}

to your child theme CSS.

Just did it. Doesn’t change anything.
My site is https://www.angrykey.com

What else would you suggest?

Looks like the transparent background is working fine on your site… however, you’ve changed the style in the original Twenty Sixteen theme, not in a child theme as suggested.

Is there a way to set the transparency – i.e. 80% for example?

background-color: rgba(255, 255, 255, 0.98)

0.98 – 2% transparency

Hi,

I have done the same, but created a child theme first. Then use the following code in child theme’s style.css file, and I shall use it in my website https://www.rigseo.com very soon.

body {
    background: transparent url("./img/wood_pattern.jpg") repeat scroll 0 0;
}

.site {
 background: transparent
}

Hello.

I also created a child theme for twenty sixteen and I cannot seem to make the site pages transparent. I entered the following into CSS

.site {
background-color: transparent;
}

I also tried,

.site {
background-color: rgba(255, 255, 255, 0.9);
}

and

.site {
background-color: rgba(255, 255, 255, 0.5);
}

At one point the first syntax worked but when i refreshed the page, the transparency disapeared.

My website is https://www.bffcooktips.com

Thanks in advance

Hi,
this works for me:

.site {
  	background-color: rgba(255,255,255,0.7)!important;
}

not getting any results from the Custom CSS input to change the page background color:

.site {
  	background-color: rgba(255,255,255,0.7)!important;
}

Though this used to work on my site: https://www.valcale.co.uk

any thoughts on why this might be, the ‘page background colour’ is set on my Customiser but the custom css doesn’t make any difference to the body fill colour for the site which is placed on top of the background image

hi temtro,
using .site class should work,

.site {
  	background-color: rgba(255,255,255,0.7)!important;
}

if it doesn’t, probably your background is registered to .site-inner, so change your child theme css using

.site-inner {
  	background-color: rgba(255,255,255,0.7)!important;
}

sincerely,

jjerro

hi afrolock, try to change this in your style.css line 236:

.wrapper {
	background: #ffffff;
	margin:0 auto;
	padding: 0 30px;
	width: 1230px;
}

to

.wrapper {
	background: transparent;
	margin:0 auto;
	padding: 0 30px;
	width: 1230px;
}

I’m using the twenty sixteen theme too.
And I try to add opacity to my page. Actually it shows up fine. Only thing is that the images and slideshows get transparent too.
Someone know a solution for this?

This is in my css file:
.site {
background-color: #990000;
}

.site-inner {
margin: 0 auto;
max-width: 1320px;
position: relative;
}

And this is my additional css:

.site {
background-color: rgba(153, 0, 0, 0.8);
}

• This reply was modified 8 years, 2 months ago by CissyMarch.