transparency of home page sections

[Roman Martsinkevich]

Hi Bill!
Could you be so kind to help me please!
i tried to make background for the home sections (one, two, three, etc) half transparent using the code like this, it’s the same like for the header, but I did it wrong probably, because nothing is change:

body.fixed #one {
background-color: rgba(255,255,255,0.5);
}

.home div#one {
margin-top: 0;
}

Thank you in advance!
Best regards,
Roman

[Bill Robbins]

Hello Roman,

Excellent question there. In this case, the home sections are all transparent. The color you see is the site’s overall background color. It’s applied to the “body” element of the page.

You could use a snippet like this:

body.fixed #one {
     background-color: rgba(255,255,255,0.5);
}

to add a color to any of the home sections, but it won’t remove the color from the body that’s appearing there already.

If you have any questions, let me know.

Thanks,
Bill

[Roman Martsinkevich]

Hi, Bill!

Thank you for quick response. I’ve try to do it but it doesn’t work, I use this snippet you provided here, nothing’s change.
In attachment you can find screen shot, as you can see white background behind the text is still exist and it’s absolutely solid, but I need it 50-40% transparent, I don’t want to close the photos on background.

Thank you in advance for your help!

Attachments:

1. 

   -экрана-2014-11-26-в-8.49.44.png
   

[Bill Robbins]

Roman,

Sorry for the confusion there. Visually it looks like the block images are behind the text blocks, but as far as the browser is concerned they are not. Since they are not behind the text areas, it’s not possible to have those images visible through a semi-transparent background. What’s visible is the background that’s behind both the text AND the images.

Our eyes don’t see it that way, but that’s actually what’s happening here in creating the parallax scrolling effect.

So that snippet above adds a semi-transparent white on top of the gray. It doesn’t change the color very much, but it does ever so slightly. But since the image isn’t behind the text, that’s the only change.

BUT, I do believe that there is a way to achieve the effect you’re going for. What we can do is add the block image as the background of the home block. Then using a bit of additional CSS, create the semi-transparent background you’re going for. Here’s how:

1. Go to your theme options page and choose the Advanced tab.
2. Scroll down to the Custom CSS box and add this:

   
   #two {
   	height: 800px;
   	background: url(https://voyagegourmet.com/wp-content/uploads/2014/11/2.jpg) center fixed;
   	background-size: cover;
   	position: relative;
   }
   
   .section-wrap {
   	width: 100%;
   	background-color: rgba(255, 255, 255, 0.50);
   }
   
   .section-wrap .widget {
   	width: 100%;
   	max-width: 960px;
   	margin-left: auto;
   	margin-right: auto;
   	float: none;
   }
   				
   @media only screen and (max-width: 767px) {
   
   	#one,
   	#two,
   	#three,
   	#four,
   	#five,
   	#six,
   	#seven {
   		background: transparent;
   	}
   	
   	.section-wrap .widget {
   		width: 90%;
   	}
   
   }
   

3. Update your settings.

That should give the second block a semi-transparent background that overlays your image. To add a similar effect for the other sections, take this snippet:

#two {
	height: 800px;
	background: url(https://voyagegourmet.com/wp-content/uploads/2014/11/2.jpg) center fixed;
	background-size: cover;
	position: relative;
}

and duplicate it for the rest, just switching out the http://voyagegourmet.com/wp-content/uploads/2014/11/2.jpg for the corresponding image and the #two for the correct section.

See if that doesn’t work for you. This is the first time I’ve given this a try, but it looks promising.

Bill

[Roman Martsinkevich]

WOW! 🙂 Thank you Bill! Probably i’ll try to do that, or will stay with a Foxy, it’s simpler to realize it there

[Bill Robbins]

Always glad to help out 🙂

[Author]

Posts