I’m sure it’s probably not clear from my title exactly what I’m asking here, so I’ll try and clarify as best I can. I’m basically just looking for opinions on whether what I’m after is possible - I can’t see a solution, but that doesn’t mean there isn’t one.
So basically I want to have my content centred, which I would do in a pretty standard way:
width:960px; margin:0 auto;
I then also want to have a background image that has the same left value as the content, regardless of screen resolution, that also flows off the screen to the right, but does not cause the horizontal scrollbar, regardless of screen resolution.
So basically the background image will be left aligned to the content, and then would display as much of itself to the right that the user could see at their resolution.
I can think of several ways of doing almost what I’m after, but none of doing exactly what I want. I’d love to hear any imnput on the subject - and let me know if any further explanation is required.
This isn’t hard to do if you are going to stick with your 960px width on the content.
Create your background image in Photoshop (or similar). Make it very wide (say 2500px or whatever) and make the first layer transparent. Mark off the center of this file, and then place another guideline 480px to the left of center. Then place the image that you want to display into this file, placing its left side along that guideline that is 480px left of center. Then save this file for the web and upload it. Place it as a background image on the body element and center it horizontally:
background: url(bgimage.png) 50% 0;
This way, it will look like the image starts along the left edge of the content and extends way off to the right.
Ah, ingenious! Not the direction my brain had been travelling in at all - I’m afraid I was rather overcomplicating things. Thanks for the solution, just what I am looking for!
