Archived topic
inside-article: transparent vs. widget sidebar length
5 replies · Started by Sven on January 26, 2016
Hi Tom,
I wonder if you can help me with that:
I have set the .inside-article to semi-transparent to show the background-image on a certain page (http://www.sven-koeck.de/kontakt).
But: the right widget is much longer than my content on that page, so therefore the semi-transparent content area ends and anything below is 100% transparent, which is not the way I want it to have!
Have a look: 
http://sven-koeck.de/wp-content/uploads/kontakt_wrong.jpg
I'd like to have the whole content-area semi-transparent from menu down to the footers' area...
On another site (http://www.fudiggl.de) I already use your solution to set the length of both sidebars from menu to footer area. Perhaps that's a possible way? I'm not that good in CSS/Javascript... so I'd really appreciate your help!
Regards, Sven
Give this CSS a try instead:
.site-content {
background-color: rgba(255, 255, 255, 0.8);
}You'll need to remove all background colors for the elements inside the content for it to work.
Got it... thanks!
/* set the background-image */
body.page-id-nnn {
background-image:url('url_to_image');
background-repeat:no-repeat;
background-attachment:fixed;
background-clip: border-box;
background-position: center;
background-size: cover;
}
/* setting the background of the article-area to transparent */
.page-id-nnn .inside-article {
background-color:transparent;
}
/* setting the background of the site-content to semi-transparent */
.page-id-nnn .site-content {
background-color: rgba(255, 255, 255, 0.8);
}
Awesome, thanks for sharing your code! :)
My pleasure! Thank you for being THAT supportive!
And enjoy your coffee... :-)
Best regards from Germany,
Sven
No problem! Thank you for the coffee! :)