# CSS positioning and overflow: backgrounds
**URL:** https://boards.straightdope.com/t/css-positioning-and-overflow-backgrounds/643531
**Category:** Factual Questions
**Created:** [December 9, 2012, 9:17pm UTC](https://boards.straightdope.com/t/css-positioning-and-overflow-backgrounds/643531 "2012-12-09T21:17:27Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@Kaio](https://boards.straightdope.com/u/Kaio)
#### Post date: [December 9, 2012, 9:17pm UTC](https://boards.straightdope.com/t/css-positioning-and-overflow-backgrounds/643531/1 "2012-12-09T21:17:27Z")
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.
---
### Author:  [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [December 9, 2012, 9:29pm UTC](https://boards.straightdope.com/t/css-positioning-and-overflow-backgrounds/643531/2 "2012-12-09T21:29:35Z")
Are you asking about this?
> **[How to Resize Background Images with CSS3 — SitePoint](https://www.sitepoint.com/css3-background-size-property/)**
>
> CSS3 introduces the background-size property which allows backgrounds to be stretched or squashed.
Keep in mind you [need a real web browser](http://fmbip.com/litmus) to take advantage of CSS3 which means, generally speaking, don’t use IE as your test browser.
---
### Author:  [@Kaio](https://boards.straightdope.com/u/Kaio)
#### Post date: [December 9, 2012, 9:52pm UTC](https://boards.straightdope.com/t/css-positioning-and-overflow-backgrounds/643531/3 "2012-12-09T21:52:20Z")
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:
```auto
------------------------------------------
| --------------------------- |
| | @ $ ^ # % & | |
| | | |
| | | |
| | | |
| | | |
| -------------------------- |
| |
------------------------------------------
```
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:
```auto
------------------------------------------
| ---------------------- |
| | @ $ ^ # % & | |
| | | |
| | | |
| | | |
| | | |
| --------------------- |
| |
------------------------------------------
```
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.
---
### Author:  [@Duckster](https://boards.straightdope.com/u/Duckster)
#### Post date: [December 9, 2012, 10:05pm UTC](https://boards.straightdope.com/t/css-positioning-and-overflow-backgrounds/643531/4 "2012-12-09T22:05:35Z")
So you’re asking for a background image that responds responsively.
Like this?
> **[Using CSS Background-size Responsively](https://onextrapixel.com/using-css-background-size-responsively/)**
>
> If the latter half of 2011 is to be remembered for anything within the web community it will be for the rapid evolution and adoption of responsive web design. Though not the Holy Grail for every mobile web strategy
Or this?
> **[Elliot Jay Stocks | Better background images for responsive web design](https://elliotjaystocks.com/blog/better-background-images-for-responsive-web-design/)**
>
> Elliot Jay Stocks is a creative director, writes about typography, and makes music as Other Form
---
### Author:  [@Kaio](https://boards.straightdope.com/u/Kaio)
#### Post date: [December 9, 2012, 10:31pm UTC](https://boards.straightdope.com/t/css-positioning-and-overflow-backgrounds/643531/5 "2012-12-09T22:31:14Z")
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.
---
### Author:  [@Kaio](https://boards.straightdope.com/u/Kaio)
#### Post date: [December 9, 2012, 11:07pm UTC](https://boards.straightdope.com/t/css-positioning-and-overflow-backgrounds/643531/6 "2012-12-09T23:07:30Z")
Well, I’m an idiot.
The answer is yes, because that’s [exactly what we did on the current website](http://terramysterium.com/). And the background image remains centered even when it overflows the size of the browser.
---
### Author:  [@Kaio](https://boards.straightdope.com/u/Kaio)
#### Post date: [December 10, 2012, 2:38am UTC](https://boards.straightdope.com/t/css-positioning-and-overflow-backgrounds/643531/7 "2012-12-10T02:38:40Z")
(In my defense, I inherited this website, I didn’t design or code it originally.)