Full Height Background Colour Strip

  • Unknown's avatar
    cameronsemple5 · Member ·

    Using the Harmonic theme.

    I’m having trouble adding a full height semi-transparent background of white behind the content but in front of the background image.

    I have done what I want for my main content page here:
    https://hikinginseqld.wordpress.com/

    By adding the following CSS: 

    #content {
	background-color: rgba(255,255,255,0.6);
}

    However, when you click on a single post heading (like this: https://hikinginseqld.wordpress.com/2014/11/17/artists-cascades-the-slow-way/) and go to its page, the #content.site-wrapper class has zero height and I can’t do the same thing. If I set the height of .site-wrapper to an arbitrary value it works, but then it will either not extend fully or make the page longer than necessary. I tried height: 100% which didn’t work.

    Any tips would be appreciated

    The blog I need help with is: (visible only to logged in users)

  • kathrynwp · Staff ·

    Because of the way the theme is designed, there isn’t an easy way to create the same effect on single posts. The developer and I came up with this, but it’s a little bit hacky :-) and you might want to test it on a post with a featured image to see what happens:

    .single #content-wrapper {
    background-color: rgba(255, 255, 255, 0.6);
    margin: 0 180px;
}
  • Unknown's avatar
    cameronsemple5 · Member ·

    Thanks. That is a good option for the time being. I’ll have to look again once I start including featured images etc.

  • The topic ‘Full Height Background Colour Strip’ is closed to new replies.