Home/ Questions/Q 6853901
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T01:34:02+00:00

I thought this would be a common question, but I didn’t find it anywhere…

  • 0

layout situation

I thought this would be a common question, but I didn’t find it anywhere…

A fixed width layout, centered to the browser window. Behind it, a background that is also centered.

The background should not cause a horizontal scrollbar. The content box should.

I cannot set the background to the body element, because that would mean the background stays centered relative to the browser (and therefore “move” relative to the content when the browser window is too small to contain the whole content box).

If I don’t set it to the body, anything that would be able to “contain” the whole image, would also cause a scrollbar… isn’t it?

Is javascript really my only hope?

EDIT:

It seems like I didn’t explain myself well enough.

This is what I want:

(highlighted area represents the browser window)

1 – no scrollbars, background sticks to content

notice that there are no scrollbars.

2 – scrollbar for content, background sticks to content

there is a scrollbar on the browser for the content

This is what I get

1 – background centers to window

If set to body, the background centers to the window and therefore doesn’t align to the content.

2 – background causes scrollbars

If I set the background to an element, it causes a scrollbar on the window and therefore, when resizing the browser, the content doesn’t stay centered as long as it should.

Answer

like the accepted one below, but with this code

#myBackground {
    background: url("img/background.png") no-repeat scroll center 0 transparent;
    height: 6000px; /*height of the background*/
    min-width: 950px; /*width of the content box*/
    position: absolute;
    width: 100%;
    z-index: -1;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I would use a DIV that is the immediate child of the body with position:fixed

    #myBackground
{
  background-image: url(myBackground.jpg);
  position:fixed;  
  width:100%;
  height:100%;
}

<div id="myBackground"></div>

    position:fixed support is lacking in older versions of IE and with the newer versions, you need to force IE to use a more modern doctype for it to handle position:fixed properly. Try this as the very first line in your HTML:

    <!doctype html>

    One question, do you need a “fixed” background or is that something I’m assuming? If you want the background to scroll with the rest of the content, replace position:fixed with position:absolute and forgo the HTML5 doctype if you want.

    • 0