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?
Resize the browser width to see what I mean.# 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 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.
You must be logged in to reply to this topic.