Grow your CSS skills. Land your dream job.

2 Repeating Backgrounds Starting at Different Points

  • # 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:31 pm

    Yes, you can. But without further details, I’m not exactly sure what you want.

    # 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:
    http://f.cl.ly/items/2t2U0m1c2o0u1Q2q372q/concept.jpg

    # November 27, 2012 at 7:14 pm

    If that is the case, then you would be best off setting each background image on the relevant element.

    # 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 8:56 pm

    @raelph You are being very ambiguous. Perhaps you could mock up a more accurate example, or even give it a shot and then share what you have with us?

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

    http://codepen.io/anon/pen/phbzd

    # 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: http://codepen.io/anon/pen/phbzd

    # November 28, 2012 at 12:51 pm

    We mean something like this:
    http://codepen.io/anon/pen/rlwsI

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

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

You must be logged in to reply to this topic.

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