Backgrounds | Still Plugging Away

In this session we see how to make your web pages more visually interesting / pleasing by setting up a good background color. Topics include:

The background-color property
color-stops
linear-gradients
radial-gradients
Local background effects (gradients within elements)

Note: I strongly suggest you view all our videos in full screen mode: click the icon in the lower right corner of the video area (it shows four arrows pointing to the corners of the screen). When you are done, the Esc ("escape") key returns you to regular mode.

Click here if you have problems with the sound on the video.

Lesson 2: Backgrounds
Part 1: Solid Colors and Gradients

Click here for the video transcript

Hands on exercise

This exercise is primarily focused on choosing background coloring

Open your index.html page, add class=back to the <body> element
Edit "workStyles.css" and add a style rule for "back", based on the lecture
Save these two files and upload them to your server to test
Experiment with different solid colors and gradients, saving the one you like the best for this website

Once you have settled on a background, you will want to keep it consistent across your website

Session 2

Here we examine using images for your page background. Topics include:

Style properties relating to background images
- background-color
- background-image
- background-repeat
- background-position
- background-size
- background
Finding images
- Windows directories
- Hire a professional
- Create your own
- Search the web
- https://pixabay.com/
- https://www.nicepng.com

Lesson 2: Backgrounds
Part 2: Images

Click here for the video transcript.

Hands on exercise

This exercise is primarily focused on using images for your page background

Check the suggested locations for images to find an image you'd like to use as background for your updated index.html page (you may use any images found in the /images directory if you wish)
- If necessary, edit the image to fit best on the page, using IrfanView, Paint, or any image editor of your choice. Then save the edited image back in the /images directory
In "workStyles.css", change the definition of ".back" to use your chosen image (experiment with multiple images if you like)
Consider if you want to use any of "background-position", "background-repeat", "background-size" properties
Test by uploading these files and displaying "index.html" in your browser
Finally, decide if you want to use a) a background color, b) a background gradient, c) a background image (or images) or d) a combination of c) with a) or b), and set your .back rule to reflect this.

Supplemental materials

A cumulative summary of the contents of this course so far: Click here
For a combined cumulative summary of both Web courses so far, Click here

Email us if you would like additional information. We would love to see your comments and recommendations for our site.

Our privacy policy: we use cookies to keep track of where you are on the site, but we do not leave cookies on your site; we do not track your visits; we do not disseminate any information about you because we do not gather any information about you.

Lesson 2: Page Backgrounds