Background Image Exercises

Focus on:

  • using background-image property
  • using background-repeat, background-attachment, background-position properties
  • refining design with sampled colors, borders, padding
  • use validators to check and correct work:

Overview

This exercise contains four pages that you need to style:

  1. Big Background
  2. Tiled Background
  3. Banner Background
  4. Hero Image

There are screenshots that you need to emulate as closely as possible. The embedded style sheet is already in each page, and the style to create a fixed-width centered layout is done. You will need to add the styles to put a background image in the page as needed, and to finish up the design so it matches the screenshot. Each page will need you to use some box properties (mostly padding and border, depending on the page) to achieve the look.

The background position example is to help you see how it is that background-position works. You only need to use keywords to center the background images at the top of the viewport in pages 1 and 2. You don't need to do any work in the background position example. It is to help you learn.

Note: all colors for backgrounds or borders are sampled from the images themselves (use Photoshop color picker for this; the CSS will use hexadecimal syntax), OR they are rgba() values for white to create translucency. Do not use any color names for this.

Workflow

1: Big Background

Use the big viburnum image in the background of the body. This is how you get an image to fill the viewport. It has fairly large pixel dimensions so it should be larger than the largest viewport. However, take note: it is under .5 meg in file size. Don't let your background images have large file sizes. It's inconsiderate.

This uses background position to get the image displaying at the top and center of the display box (the body). View the background position example in this exercise to help you understand how this works.

The wrapper has a border, some padding, and a background color using rgba() syntax so that it is translucent. Otherwise it would be next to impossible to read the text on top of the image.

Experiment with background-attachment so you can see what it actually does in the browser; it is a bit difficult to describe it, but you'll be able to see it in action.

2: Tiled Background

This uses a tiled image in the background of the body (the browser will tile automatically). The background and border colors are sampled from the image. If you use background position to bring the first instance of the image in at center top, then it "moves" with the wrapper when you change the viewport width. Try it to see what I mean!

3: Banner Background

This exercise puts the background image in the banner. You'll need to set the height of the banner so the entire image shows. Border and background colors are sampled from the image itself in Photoshop.

This design uses text-align to center the site id. We haven't learned that yet, so I have written that style for you. But you'll need to edit the h1 style to get a translucent background color in the h1! And some padding! and maybe even zero out margins!

4: Hero Image

This page has a hero image that goes in the background of the main. The markup has a class in the body (class="home") so that the background image for the hero can be specified for the home page only. This assumes you'd have a site with hero images on all the pages that would be specific to that page, and would therefore need to filter for each page with a descendant selector. The homepage main is also padded to make a space for the image to display before the article and its contents are laid out.

This design uses multiple wrappers (already in the markup and styled) so that the live space is limited, but backgrounds are not. This is different from the Banner Background, which puts the background image inside a fixed-width banner.

You'll notice that the hero image is wide and narrow so that it will extend beyond the live space in a very wide viewport. It's important that you understand such hero images must be formatted in this way.

Note: there is no video for this on Canvas (it's new) so if you need help, view the recorded class lecture which will go over how to do it.

Validation

You want to be sure you've written valid markup and valid styles. Use the online validator tools to check your work. If there are errors, read what the validator says about them and check the lines in your markup where the errors occur.