• # November 27, 2012 at 6:26 pm

    I was wondering if it’s possible to have two repeating background images, starting at different points. Like so:

    Anyone know of a way to do this?

    Thanks in advance.

    # November 27, 2012 at 6:29 pm

    I’m not sure what you’re going for here. Could you explain further?

    # November 27, 2012 at 6:55 pm

    @TheDoc @joshuanhibbert I’m essentially trying to achieve one normal background-image repeat, and another that ends just at my sidebar.

    Here’s a bigger version of the image I’m trying to re-create with CSS:

    # November 27, 2012 at 7:40 pm

    @joshuanhibbert But my elements are only as big as the outlines I’ve drawn. Am I missing something here?

    # November 27, 2012 at 8:32 pm

    What background images do you want to use. You might have to use 1 that is centered and use repeat-y. Im on a phone, otherwise id play with this.

    Alternatively, you can put your elements inside two container divs (yes, divs purely for style. Its a possibility, not the best) and lay backgrounds on that.

    # November 27, 2012 at 9:02 pm

    Can’t you use a single repeating image on the container?

    # November 27, 2012 at 9:12 pm

    @joshuanhibbert So here’s what I’m working with: I’m trying to have it so the sidebar’s background image extends all the way to the far left of the browser.

    # November 27, 2012 at 9:19 pm

    just make a wide (say 2000px or more) single image (with both columns), repeat vertically, and center it on the container. The outer edges will be clipped or revealed as the browser is resized.

    # November 27, 2012 at 9:50 pm

    @wolfcry911 I’m confused. So, you want me to make a wide image of bg.jpg, and center it on the container?

    # November 28, 2012 at 7:57 am

    yes, make a very wide image. Start with your desired width and column division and then add say 800px on either side of the image (right side lighter, left side darker). Then simply center the image (the column should be offset to where you want). As the browser is resized more or less of the image is revealed.

    # November 28, 2012 at 11:56 am

    @wolfcry911 I’m seriously confused. Mind showing me what you mean on this:

    # November 28, 2012 at 12:51 pm

    We mean something like this:

    I left the image at 100px height because your bigger square background has thicker lines every 100px; But if it was a simpler design, you could easily do a 1px height background image. Then just do background-repeat: repeat-y; (Repeat vertically only).

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

Viewing 15 posts - 1 through 15 (of 19 total)

You must be logged in to reply to this topic.