The following file is required for this lesson:

Demo Instructions

You can follow along with your instructor to complete this build and/or you can use this document as a guide in completing the demo build.

Steps

  1. Download the demo-responsive-bg.zip file from Moodle and extract its contents to a folder named demo-responsive-bg.
  2. The completed output should look like:
    background-01.jpg
  3. The first thing to do is find the size of the original image; this is needed as a starting point for this demo:
    img-properties.jpg
  4. Use Photoshop or Squoosh to resize the image (save each resized image but do not overwrite the original file):
    1. 600px x 400px: name this small-bg.jpg
    2. 1200px x 800px: name this file med-bg.jpg
    3. 1800px x 1200px: name this file lg-bg.jpg


    Note: you should now have 4 images in your img folder:
    img-folder.jpg

  5. You will need to add style rules to the styles.css file:
    1. Start with the smallest image:
      css-styles-01
    2. Style the <h1>:
      css-styles-02
  6. As the width of the browser increases, the quality of the image degrades. To fix this we need a media query:
    1. First break point at 850px:
      css-styles-03
    2. Next break point at 1000px:
      css-styles-04
    3. Finally, a full-sized image for wide screens:
      css-styles-05
    4. Open the browser’s developer tools to see:
      1. Smallest resolution:
        background-02
      2. Medium image:
        background-03
      3. Large image:
        background-04

Additional Layout

For extra practice you will add content and styling rules to get the output shown below:
background-05.jpg

  1. The index.html file needs the following code added below the <header> block:
    index-01.jpg
  2. The following code needs to be added to the styles.css file:
    1. Add a .flex-container class:
      css-styles-06
    2. Style the <section> element:
      css-styles-07
    3. Style the first <section> element:
      css-styles-08
    4. Style the second <section> element:
      css-styles-09
    5. Style the last <section> element:
      css-styles-10
    6. Add a media query so you can switch the order back to the original order:
      css-styles-11
    7. Add a media query for a fixed-width, edge-to-edge, background image:
      css-styles-12
  3. Refresh your browser to see the final output. Additionally, use your browser’s developer tools to see the results at different screen widths.

Module Home

DMIT1530 Home