CSS positioning and overflow: backgrounds

Factual Questions
1

Just curious if there is a way to do what I propose below.

Website redesign: the proposed design will basically look like you’re looking down at a table (say, body: background (url) ), and the banner image is a few small objects sitting on that table. I’d like that banner/objects to always be centered, above the content area, regardless of the width of the screen.

If I make the entire background-plus-objects a single image, is it possible to do something like:

background-position-x: center;

AND have it overflow (in other words, be larger than) the browser window?

The goal is to have this banner / row of objects, say 1000px wide, always be centered at the top of the window, regardless whether the window is 1000px wide or 1680px wide. If the window is wider, you see more empty table surface, an equal amount on each side.

The only other solution I can think of is that the background image is the blank table surface, and then I’d have to cut out the background around the objects and make it transparent so it could be separate from the background (and put into a centered div), which is obviously a bit more labor intensive – especially since at least one of the objects will probably be a clear glass bottle.

2

Are you asking about this?

Keep in mind you need a real web browser to take advantage of CSS3 which means, generally speaking, don’t use IE as your test browser.

3

No, I’m not looking to resize the background, I want the row of objects to always be 1000px wide.

I’m looking for something like this very bad ASCII sketch:



 ------------------------------------------
 |      ---------------------------       |
 |      |    @ $  ^  #   %  &     |       |
 |      |                         |       |
 |      |                         |       |
 |      |                         |       |
 |      |                         |       |
 |      --------------------------        |
 |                                        |
 ------------------------------------------

The big rectangle is the background image. The small rectangle is the screen size.
The row of objects are ON the background image. If the screen width changes, I still want that row of objects to be centered on the screen, like so:



 ------------------------------------------
 |        ----------------------          |
 |        |  @ $  ^  #   %  &  |          |
 |        |                    |          |
 |        |                    |          |
 |        |                    |          |
 |        |                    |          |
 |        ---------------------           |
 |                                        |
 ------------------------------------------

I’m open to other solutions, but since the table/background will be textured (wood grain) I forsee difficulties if I were to, say, attempt to seamlessly match a separate banner image with the background on varying sized screens.

4

So you’re asking for a background image that responds responsively.

Like this?

Or this?

5

I don’t want to responsively change the size of the background image at all. It should retain the same dimensions regardless of screen size – the row of objects will always be 1000px wide. (I am, for the moment, setting aside the mobile-friendly CSS.)

The main point is that I want to know if background-position-x: center will center the background image even if there is substantial overflow. Will it only center the image if the image is the same width or smaller than the size of the window? Does it always line up the left edge of the image with the left edge of the browser if the image doesn’t fit? Or does it allow 200px to flow off both the left and right sides?

I’d like to know this simply because if development of this design concept is too complex to do seamlessly, I may have to throw out this design and come up with something else. I don’t want to create a full mock-up only to discover that my idea doesn’t work in code.

6

Well, I’m an idiot.

The answer is yes, because that’s exactly what we did on the current website. And the background image remains centered even when it overflows the size of the browser.

7

(In my defense, I inherited this website, I didn’t design or code it originally.)