Lesson 7: Backgrounds and Gradients

CSS equips us with the ability to add colors and images to elements on a page. 

Backgrounds and Gradients

Deciding when to use the html <img> tag vs. setting an image as a background can get confusing, but the slides and exercises in this lesson should help clear things up.


See the Pen vhtxf by Michael Macfadden (@mmacfadden) on CodePen.


With a partner, create a new CodePen. Design an invitation to turnaout, and include the following:

  • Create a navigation that links to all of your classmates’ invitations
  • Custom Typography
  • Custom backgrounds
  • An embedded YouTube video

Creativity is key here. Make sure to share your link via comment in Google Classroom.

Sample Code

See the Pen qfdcJ by Michael Macfadden (@mmacfadden) on CodePen.

Body Gradients