The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

    This reply has been reported for inappropriate content.

    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:

    Works pretty well, right?

    # December 3, 2012 at 8:59 pm

    This reply has been reported for inappropriate content.

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

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed