CSS Image Scaling without being Cropped

I have an image on the top page that's 960x200px wide. It's in a div tag. What happens is when I scale the page by pressing ctrl+scrolling, the image scales out of the page, off the screen, and gets cropped off. How can I make it that when I scale the page, like amazon.com or other websites, the page doesn't become cropped and instead, I get an horizontal scroll bar at bottom of the browser?

/* css */
#header { background-image: url('image.gif'); }

<!-- html -->
<div id="header"></di开发者_如何学JAVAv>

---

This is happening because your image is a background-image.

Therefore the width of the image is not being calculated as part of the width of the page.

If you want this not to happen, make your div#header explicitly 960px wide.

---

You need to make the header image part of the HTML code like this.

<div id="header">
    <img src="image.gif" width="960" height="200" />
</div>