Backgrounds and Gradients (v1)

Introduction

Backgrounds are usually ignored until they become a problem and then you’re left trying to figure out why your elements are coming out looking so odd. This brief section should get you thinking properly about backgrounds and the kinds of things you can do with them by just using regular old CSS.

Learning Objectives

  • How do you set the background color?
  • Which color is used when elements are stacked on top of each other (on the z-axis)?
  • How do you set a partially transparent color? (rgba anyone?)
  • Where are gradients most commonly used in "real world" websites?
  • How do you set a gradient background?
  • How do you make an image the background of an element?
  • Why is it useful to make the image the background of an element instead of using a regular <img> tag?
  • How do you make a background image of a fixed size?
  • How do you make a background image repeat?
  • How do you get your page’s background image to fill the page even when you resize the browser?

Study

  1. Read Shay Howe on Backgrounds & Gradients

  2. Skim through this CSS Tricks article on the different types of gradients

Additional Resources

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack