How to use a 1200px background while preventing horizontal scrollbars if browser width isn't 1200px wide?

Question

For my header, I have a repeating element that will expand whatever the browser width is -- 2000px, 4000px, etc. Inside the header element, I have a 1200px wide background that is fixed. My page layout is 960px wide.

If I set the fixed with to 1200px, horizontal scrollbars will appear for users with a browser width below 1200px.

How can I make it so people with a 1100px browser window will not see horizontal scrollbars?

header {
  background: #000 url("/images/bg-header-repeat.png") repeat;
  position: relative;
}

.header-wrapper {
  background: url("/images/bg-header.png") no-repeat left top;
  margin: 0 auto;
  min-height: 100px;
  width: 1200px;
}

.container {
  margin: 0 auto;
  width: 960px;
}

Answer 1

don't give static (and that large) width to your container.

do this:

.header-wrapper {
  background: url("/images/bg-header.png") no-repeat left top;
  min-height: 100px;
  width:100%;
  position:relative;
  left:0;
  top:0;
}

.container
{
    position:relative;
    width:80%;
}

giving large static width is prone to bring horizontal scroll bar in some resolution. If you want to cover entire browser width on a wide range of resolution that, give width in percentage. Also making your container position:relative makes its top, left, right and bottom properties active. so you won't need to use margin. These properties pick their value relative to the parent container.

Answer 2

Try adding max-width so the header changes width on smaller screens:

.header-wrapper {
  background: url("/images/bg-header.png") no-repeat left top;
  margin: 0 auto;
  min-height: 100px;
  max-width: 1200px;
}