Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

General Discussion

Need make image width 100% only the width

I have been trying to make an image on my web page 100% of the browser width and keep it fixed

2 Answers

Can you post your current HTML and CSS?

Generally, assigning a width of 100% to an image will only make the image the same width of its container div. You can give an image 100% width with the following CSS...

img { width: 100%; }

If the image isn't taking 100% of the width of the screen it's because it's inside a div that has a restricted width. Take it out of the containing div and you'll get 100% width.

If you don't want the height to change, you must set a height to the value of whatever it is you want, for example...

Img { width: 100%; height: 400px; }

And now, if you want your image to scroll when the screen does, give it a position of fixed like so...

Img { width: 100%; height: 400px; position: fixed; }

thanx alot it all seems simple now