[Resolved] inside-article: transparent vs. widget sidebar length

[Sven]

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

[Tom]

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.

[Sven]

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);
}

[Tom]

Awesome, thanks for sharing your code! 🙂

[Sven]

My pleasure! Thank you for being THAT supportive!

And enjoy your coffee… 🙂

Best regards from Germany,
Sven

[Tom]

No problem! Thank you for the coffee! 🙂

[Author]

Posts