Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
John Fisher
7,974 PointsHow do I make an image fill browser?
Hi
Can someone tell me how I can make an img fill the browser screen (even When user resizes the browser), and add a clickable arrow to zip the user to the next section section of the page?
Basically like they have done with this webpage: http://www.theverge.com/a/apple-watch-review
Just a pointer in the general direction would help! Thanks
4 Answers
Marcus Parsons
15,719 PointsHey John,
It is not too complicated to make the image stretch to fit the screen. First, you have to set the HTML page and the body to be a height of 100% and if you don't have "normalize.css" included in your page, set margin and padding to 0. Then, you set your width and height both to 100%. Set your margins and padding on the div to 0, as well. You will also want to set your max-height so that the picture cannot overflow past its boundaries. Add in the background-image property and the background-size to "100% 100%". And set the background to not repeat by adding the "background-repeat: no-repeat" property.
Also, be sure to put some content in the div such as just a nonbreaking space entity -> & nbsp; (put the & with nbsp; though):
<body>
<div> </div>
</body>
And the CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 100%;
max-height: 100%;
margin: 0;
padding: 0;
background-image: url('img/IMAG0360.jpg');
background-size:100% 100%;
background-repeat: no-repeat;
}
Marcus Parsons
15,719 PointsKeep in mind, however, that smaller images are going to look terrible when they are scaled upwards. Larger resolution photos still retain clarity when scaled down. You'd want to start with a high resolution photo so that it will scale nicely.
Erik McClintock
45,783 PointsJohn,
For a full-page image, you can use the background-image property of an element and set its value equal to the image that you want. Then, set the background-size property to "cover", and the background-repeat property to "no-repeat". Check out this Treehouse Quick Tip for a little more information, and check out the myriad of CSS courses for even greater detail.
As far as the arrow that jumps to a specific part of your page, that is simply an anchor with an href attribute that links to an ID of another element on the page, and a little smooth scrolling thanks to JavaScript/jQuery. Check this pen for an example.
Erik
Michal Broniewicz
6,681 PointsYou can try using background-size: cover; which would scale the picture to cover whole space (will scale using shorter side of your picture so it can happen that not whole img would be shown).
Check some ideas here https://css-tricks.com/perfect-full-page-background-image/
And for the arrow just make an arrow with
<a href="#idname"> your arrow here </a>
then put the id to the part of html structure you want to jump in. For example if you want to jump to the section then
<section id="idname">
John Fisher
7,974 PointsThanks guys.
I done it this way in the end... http://codepen.io/JohnFisher/pen/BygaLd
Using height: 100% didnt seem to work, so after digging a little deeper I discovered this css size unit "vh" for viewport height (which I vaguely remember being mentioned in one of the Treehouse CSS courses). This seemed to do the trick.
tomasvukasovic
24,022 PointsThats an awesome unit man! Thanks
Marcus Parsons
15,719 PointsThe "vh" unit is an awesome unit; however, there is one browser that still only has partial support for these units. If you guessed IE, you are correct! And there is one browser, Opera Mini, for which there is no support for these units.
There is more compatibility for using the % method, as I suggested, than there is for using the "vh/vw/vmin/vmax" units.
tomasvukasovic
24,022 Pointstomasvukasovic
24,022 PointsHey there! make a div with with a height of auto an a width of 100% , then establish the background-image property and the background-size to cover, that should do the trick, remember to put the max-height property also