Take the 2-minute tour ×

I have an image for background which is 2000px width. It is prepared in a following way: 1000px in the center for content, and additional 500px on the left and right for margins in higher resolution monitors.

I would like it to be centered on every resolution.

When I try it to do with bg {background:url(bg.jpg) no-repeat center top fixed; } image is properly centered, but it obviously do not scroll.

So I'm replacing fixed with scroll: bg {background:url(bg.jpg) no-repeat center top scroll; } but than image is not centered - it starts displaying from top-left corner, so that in smaller resolutions you can see left margin, which shouldn't be visible.

Here is example on jsfiddle.net. Play with background-attachment values scroll/fixed and try to reduce size of result window and you will hopefully understand know what I mean.

Can you help me with solving this issue?

share|improve this question
Can you setup a jsfiddle? –  Sean H Jenkins Jan 3 '12 at 22:59
Or a CSSDesk. The CSS snippets you posted appear to be valid. –  benesch Jan 3 '12 at 23:01
I've edited my question and added jsfiddle. –  user1128796 Jan 3 '12 at 23:31

2 Answers 2

Try using the background-attachment property like below

share|improve this answer

Use media queries. Something like this.

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {

#left-margin-div {
height:1700px; /*or whatever your height is*/

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
share|improve this answer

Your Answer


