This is a lesson I have been meaning to put together for a while, and when I completed it last weekend, I was really pleased with it and excited about trying it with students last week.
It is clear in my discussions with students that they are not entirely clear on a few key concepts, the first is the difference between background images that load through CSS and are “decorative” in nature, and images that are actually part of the content and load through an html tag, such as the good old fashioned img tag.
The second concept that seems to mess people up is the notion of proportion vs cropping. If the image is set to the full width of the browser window and cropping is not the desired effect, than both the width and height of the image need to change when the window size is changed. Allowing the image to be cropped is much less troublesome, but not necessarily the right option for all images.
The exercise files are available for download from my github page. If you are looking to understand the options and benefits of the various options for full width background images, download them and take a look at it. All the information you need is baked right into the files.
The first example is not really a full screen background image, unless your browser happens to be 1200px wide. The second file shows you how to set up a full sized background image that changes proportion when you resize the window. However, the image will be cropped. The trick here is to use width: 100% and background-size: cover.
header {
width: 100%; /*changed from a fixed width*/
height: 600px; padding-top: 400px;
background: #fff url(images/pie01.jpg);
background-size: cover;
}
The third file shows how to make the image resize both horizontally and vertically to maintain the correct aspect ratio for the image. The key here is to set the height of the element containing the image to zero, but have the padding-top set to a ratio of the height to the width. So if the image is 1200 pixels by 600 pixels, the padding-top would be set to 50%.
header {
width: 100%;
height: 0;
padding-top: 50%;
background: #fff url(images/pie01.jpg);
background-size: cover;
position: relative;
}
The fourth file demonstrates how to make background images take up the whole browser window, no matter how big the browser window is. This, of course, leads to cropping again. The trick here is to set the height of the element to 100vh and background-size: cover.
header{
width: 100%;
height: 100vh;
background: url(images/pie01.jpg);
background-size: cover;
position: relative;
}
It position: relative is set in these last two examples because any content inside these elements must be absolutely positioned.
Things get really fun in the fifth example file, which shows how to load only the size image you need depending on the size of the screen. The example shows a mobile first approach, where the smallest image is loaded by default, but if the user’s screen is larger, that browser will download a larger image.
Recent Comments