2 Repeating Backgrounds Starting at Different Points - CSS-Tricks

This topic is empty.

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

1 2 →

Author

Posts
November 27, 2012 at 6:26 pm #41027

realph
Participant

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

TheDoc
Member

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

November 27, 2012 at 6:55 pm #115683

realph
Participant

@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:40 pm #115686

realph
Participant

@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 #115687

pmac627
Participant

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

wolfcry911
Participant

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

November 27, 2012 at 9:12 pm #115693

realph
Participant

@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 #115695

wolfcry911
Participant

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

realph
Participant

@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 #115746

wolfcry911
Participant

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

realph
Participant

@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 #115824

pmac627
Participant

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

November 28, 2012 at 1:50 pm #115835

realph
Participant

@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 #115836

Paulie_D
Member

Probably should have mentioned that at the start.

Sounds like a JS solution is called for.

November 28, 2012 at 2:23 pm #115838

pmac627
Participant

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

Posts

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

1 2 →

The forum ‘CSS’ is closed to new topics and replies.