Grow your CSS skills. Land your dream job.

2 Repeating Backgrounds Starting at Different Points

  • # November 28, 2012 at 1:50 pm

    @pmac627 The problem with that, is that the background shifts when you resize the browser. I need that sidebar background to stay put even when the browser is resized.

    # November 28, 2012 at 1:59 pm

    Probably should have mentioned that at the start.

    Sounds like a JS solution is called for.

    # November 28, 2012 at 2:23 pm

    Yeah, JS… I guess you need to apply the general background to the whole page like I did and then the sidebar background needs applied with JS to measure the distance between the sidebar and the left side to calculate % and adjust the css.

    # November 28, 2012 at 2:26 pm

    Sounds complex.

    Just use an equalheight script and set a different bg to the sidebar.

    # November 28, 2012 at 5:33 pm

    So what happens with the content when the browser is resized? It sounds to me like you haven’t thought this through.

    # November 28, 2012 at 5:54 pm

    Here is the page with two separate backgrounds but it has the same problem with the background moving as the browser is resized.

    # November 29, 2012 at 3:22 pm

    Think I might have worked it out. Solution incoming!

    # 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 3, 2012 at 8:59 pm

    @realph Works great in IE 8 and above.

Viewing 9 posts - 16 through 24 (of 24 total)

You must be logged in to reply to this topic.

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