myrrh - 1:45 pm on Mar 4, 2012 (gmt 0)

I know I could just make the top and bottom images 150px high, but I didn't think that was the best way to do it. Well, that's definitely the first answer that comes to mind. Can you explain what the problem is?

By "problem" do you mean why I said I didn't think that was the best way to do it? If so, I said that because I thought I was desirable to keep images' file sizes as small as possible for faster page loading.

Keep in mind that you can set the starting point for a repeating image. So if it's important not to chop the 150px image in the middle, position it at the top rather than vertically centered.

Then how do I limit the top repeat-y image to 150px so the main background is visible?

To double-check: You're talking about alternating images, in stripes, right? Not layered backgrounds where you have a 150-px repeat sitting on top of a 1-px repeat?

No, not alternating stripes.

I want an image 150px high at the top to span the entire width of the browser window, whatever the user's resolution may be. This image can originate as 1px high as it is only a background design.

Then the main background of the page will be below that. It too needs to be a y-repeating image because it's a gradient design.

Then at the bottom, another 150px high image (or possibly greater in height as it will be the footer and contain typical footer content such as nav links, contact info, icons for Facebook and Twitter, etc.) - possibly the same image as the top or possibly a different image - again, something that can originate as a 1px high image and set to repeat-y.