Changing the background of certain divs – Toolbox

  • Author
  • #726385


    I’d like to change the background color of the #page div in my website to “rgba(29,50,31,0.7) !important” to match the background of the page itself but be transparent over the images in the background. No matter how many different ways I specify this in my CSS, either via class, id, class > id, tag, etc. it will not change anything. If I place it on a more specific div such as #main, #content, .widget-area, it works just fine. Is there something special or specific about the #page .hfeed div in the Toolbox theme that I am missing? Why isn’t my “!important” overriding this, whatever it happens to be?

    The blog I need help with is


    It’s hard to say without seeing what other CSS you might have added. Can you link us to the blog you’re working on?

    Also, are you certain #page is the one you want to modify? If there are more specific divs overlaid on top of #page, then of course those ones won’t be transparent unless you set transparency on the more specific divs too (like ou mentioned). For example, in Toolbox, #main has the background set to white. If you set #page as transparent, then the #main div will still be opaque white over the top of it unless you change #main too.

    Use this to see what I mean:

    #main {
    background: none;
    #page {
    background: rgba(29, 50, 31, 0.7) !important;

    Note that because of the way Toolbox is designed, it might not work well to turn the background off for #main though.


    We need a link to the site you are talking about please. The one linked to your username is wearing Benevolence.


    Member is the site I’m currently working on. Thank you again for your help.



    Also, I have experimented in a lot of different ways and I can positively say that the #page div is my target, considering also that the background I am trying to create a transparency over is the background of the “body” tag and nothing else. I can’t get any lower than that.




    After some more experimenting, I’ve found that #primary is the most sufficient to use to cover most of the page. Initially it wouldn’t cover the sidebar area so I gave #primary a padding to cover the rest of the page and positioned the sidebar over it. It worked very well, thanks again.


    I messed around with #page, and the problem seems that it is not, for whatever reason, extending down to the bottom of all the content (bottom of footer). If I added a height to #page of say, 500px, then I could your background. I tried doing a 100% height, but that didn’t work, and setting a fixed height is no solution since the page heights can and will vary.

The topic ‘Changing the background of certain divs – Toolbox’ is closed to new replies.