Preventing horizontal scrolling after a certain width

I'm making a website with a large image at the top that extends past the far right of the page. The problem is that the browser ke开发者_StackOverflow中文版eps adding a horizontal scroll bar to allow the user to scroll to the end of this image but I don;t want it to do that.

Is there any way I can tell the browser to treat the image a bit like a background image or to simply stop scrolling after 940px?

http://www.electric-drumkit.com/404.php

There's an example of the page so you can get a better idea of what I mean.

The way to do it here is to:

• Add a new div (or other relevant HTML5 tag if you prefer): <div id="wrapper">, containing everything inside body.

• Move these rules from body to #wrapper:

  margin: 0 auto;
  position: relative;
  width: 960px;
  

• Add this new CSS:

  body {
      min-width: 960px;
      overflow: hidden;
  }
  

• Add this to get horizontal scrolling back when the window is less than 960px wide:

  html {
      overflow: auto;
  }
  

Here's a live demo so you can quickly see if my answer will have the desired effect.

Tested in Firefox, Chrome, IE8.

Put the image into a div like this:

<div class="image"></div>

And in CSS you can write:

.image {background: url(http://www.electric-drumkit.com/_images/_feat/404.png) bottom right no-repeat; height: 314px;}

In this way, your div will render the image as a background, into a div, and i think there will be no scrolling.