Guide To Large Background Images

February 12th, 2017

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.

    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.

Comments are closed.


Recent Comments

    Featured Projects

    1. ZAP Creative

      Responsive Design, HTML, CSS, JS, PHP and WordPress

    2. Animal Shelter

      Responsive Design, HTML, CSS, JS, PHP and MySQL

    3. Experimental JavaScript

      Responsive Design, HTML, CSS, and JavaScript


      HTML, CSS & JavaScript focusing on jQuery plugins

    5. Syllabus Generator

      PHP & MySQL Web Application

    6. CodeSnap Web Application

      PHP & MySQL web application

    More Projects

    1. 4.23 Microsite

      Experimental JavaScript Microsite

    2. Audio Space

      HTML, CSS & jQuery

    3. Bttrfly Productions

      HTML, CSS, JS, & WordPress

    4. Desktop Repainter

      HTML, CSS & JS

    5. Bluephant Dental

      HTML, CSS, & JS

    6. Zen Music Festival

      HTML & CSS

    About William Mead…

    William Mead Photo

    This site shows some of my front-end design and development work and shows how I use these projects to teach students about those same topics.

    Find me on these networks

    Professional Qualities

    • Enthusiastic about teaching, learning, managing projects and building products for the web.
    • Deeply creative and always playful. Frequently engrossed in solving complex puzzles.
    • Thoroughly engaged in the design and web development industries.
    • A visual learner with an analytical mind.
    • Introspective and always striving for improvement.


    I am particularly good at bending CSS to do my bidding, and I really enjoy creating custom interactivity with JavaScript. I am always excited about new problems that need to be tackled.

    Contact Me…

    I look forward to hearing from you. Please contact me using the form or directly by email or phone.


      Your Name (required)

      Your Email (required)


      Your Message

      Anti Spambot Question