Transparent content-main with scrolling entry-content

  • elarson


    I am trying to make the #content-main block with a transparent background or opacity 0. I want text to overlay the featured image used as a header image. I have tried many combinations, and just can’t get any of them to work. Any tips.

    I would also like to make the entry-content to be scrolling text with a transparent background. Does anyone know of a good plugin to accomplish this?

    Here is a temporary link to the site so you can see what I mean.

    Many thanks.


    Kenneth John Odle


    Try this:

    #content-main  {
    height: 500px;
    overflow: scroll;

    The best/easiest way to create a transparent background is to create a transparent .png image and set that as your background.

    You have made some awesome modifications, btw. Well done!



    Wow, thanks for that easy code on the scroll. I’ve never needed that before and thought I would need jQuery on it.

    No matter what I try, I just can’t seem to get the background to be transparent. I’ve tried it on almost every container I can think of (content, content-main, entry, etc.), and still no luck. I know I’m calling it out okay, because when I switch it to red from transparent it is obvious. Here is what I am using:

    background-image: url(images/bg_content-main.png) repeat !important;

    Any idea on exactly which id/class I should be using it on?

    Many thanks.



    I have also tried adding this to all the containers without any luck:

    background-color:transparent !important;


    Syahir Hakim

    .post {
    background: none;



    Thank you Syahir. That did the trick.



    Marking thread as resolved. You can do this yourself as well.



    Thanks Prasanna. Next time I will try to remember to do that. You guys are great.

Viewing 8 posts - 1 through 8 (of 8 total)

  • You must be logged in to reply to this topic.