Multiple Background Solution?

[realph]

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.

[wolfcry911]

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.

[realph]

@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.

[realph]

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?

[wolfcry911]

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

[realph]

@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.

[Author]

Posts