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