Grow your CSS skills. Land your dream job.

Multiple Background Solution?

  • # December 3, 2012 at 6:26 pm

    I’m working on a page with a simple 960px container, sidebar and a content div. I’ve given the body a background as well as the sidebar. Problem is, because I’m using a container (which is mandatory) the sidebar background sort of cuts off on the left hand side, which I don’t want.

    What I’ve done is add a second background to the body to achieve the same effect, the problem I’m having is when you resize the browser past a certain width the trick is revealed and the sidebar cuts off again. Does anyone know a better trick to get around this?

    http://codepen.io/joe/pen/obvyD
    Resize the browser width to see what I mean.

    # December 3, 2012 at 6:30 pm

    realph, I gave you a solution in one of your other threads and someone made a codepen example for you. You then dismissed it, but it is still a viable and working solution.

    # December 3, 2012 at 6:59 pm

    @wolfcry I’m trying to achieve it a different way here. If you look at the codepen @pmac627 whipped up here, you still have the problem when you resize the browser width the background is then cut off. I’m trying to find a solution around that.

    # December 3, 2012 at 8:16 pm

    Ok, so I think I found a solution here. I’m using body:after to create a “faux background” that starts from the left of the browser window. The benefit of this is no extra divs, and just a few lines of CSS. I then give my content div the same background as the body and voila!

    Here’s a CodePen with my results: http://codepen.io/realph/pen/recAg

    Works pretty well, right?

    # December 4, 2012 at 4:50 pm

    all you needed on pmac627′s pen was html {min-width: 1200px;}

    # December 4, 2012 at 6:46 pm

    @wolfcry911 Still wouldn’t be a viable solution. The background cuts off when the browser’s width is stretched beyond 2100px. Also using two separate background images makes it more dynamic, allowing, for example: responsive design if I decide to go down that route.

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".