CODEWITHSUNDEEP
htmlcss
rushd
rushd

Reputation: 363

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"></div>

Upvotes: 1

Views: 238

Answers (2)

user188654
user188654

Reputation:

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>

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34855

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.

Upvotes: 1

Related Questions