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 AdvancedWebFiles/1-2-index.html page, add class=back to the <body> element
Change the reference to the stylesheet to be "2-1-workStyles.css"
Save this file as "2-1-index.html"
Edit "workStyles.css" and save it as "2-1-workStyles.css"
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 new AdvancedWebFiles/2-2-index.html page (you may use any images found in the /images directory if you wish)
- Save this in your /images directory (If necessary, edit the image to fit best on the page, using IrfanView, Paint, or any image editor of your choice.)
Open your "2-1-index.html" page and change the reference to a style sheet to point to "2-2-workStyles.css"
Save "2-1-index.html" as "2-2-index.html"
Open "2-1-workStyles.css" and save it as "2-2-workStyles.css"
In "2-2-workStyles.css", change the definition of ".back" to use your chosen image(s)
Consider if you want to use any of "background-position", "background-repeat", "background-size" properties
Test by displaying "2-2-index.html" in your browser

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