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.
@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.
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.
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.
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).
@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.
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.
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!
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.
I'm not sure what you're going for here. Could you explain further?
Yes, you can. But without further details, I'm not exactly sure what you want.
@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
If that is the case, then you would be best off setting each background image on the relevant element.
@joshuanhibbert But my elements are only as big as the outlines I've drawn. Am I missing something here?
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.
@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?
Can't you use a single repeating image on the container?
@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
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.
@wolfcry911 I'm confused. So, you want me to make a wide image of bg.jpg, and center it on the container?
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.
@wolfcry911 I'm seriously confused. Mind showing me what you mean on this: http://codepen.io/anon/pen/phbzd
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).
@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.
Probably should have mentioned that at the start.
Sounds like a JS solution is called for.
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.
Sounds complex.
Just use an equalheight script and set a different bg to the sidebar.
So what happens with the content when the browser is resized? It sounds to me like you haven't thought this through.
Here is the page with two separate backgrounds but it has the same problem with the background moving as the browser is resized.
Think I might have worked it out. Solution incoming!
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?
@realph Works great in IE 8 and above.