Sign In | Subscribe

Enter your Sign on user name and password.

Forgot password?
  • Follow us on:
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of CSS
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Related Services

Lecture Comments (4)

1 answer

Last reply by: Rivka Stein
Thu Jan 24, 2013 4:45 AM

Post by james raimondo on January 16, 2013

So far i have listened to over 27 lectures and the lessons are great! I would highly recommend anyone who wants to learn website design to take this course. Brenton does a fantastic job of teaching!

James R

1 answer

Last reply by: David L
Fri Mar 16, 2012 2:03 AM

Post by Jeff Lambert on December 7, 2011

One question...not sure if it is possible. I have a background image that I have positioned in the top right corner, so if I make my browser window smaller it moves according to the size of the browser box. What if I wanted the background image still on the top right but once the browser window gets smaller than 500px it then goes into a fixed position and doesn't move along with the browser window any more. Does that make sense?

CSS Backgrounds

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Background Properties 0:14
    • Background, Attachment, Color, Image, Position & Repeat
  • Example 1: Colors 1:32
    • Step 1: Change the Color of the Document Background
    • Step 2: Change the Background Color of a Paragraph & Some Inline Text
    • Step 3: Observe the Change in Background Size as Margins, Borders, and Padding Changes
  • Example 2: Background Image Guy 8:20
    • Step 1: Remove the Decorative Image From the Content
    • Step 2: Use CSS to Place It in the same Location It Was Before
    • Step 3: Make the Image Stay There, Even When the Document is Scrolled
  • Example 3: Repeating Images 14:52
    • Step 1: Create a Horizontal Pattern Using Repeat-x
    • Step 2: Add a Secondary Decorative Image in the Top-right Corner
    • Step 3: Use the ColorZilla Firefox Add-on to Find the Background Color that will Match the Image
  • Example 4: Putting it Together 21:37
    • Step 1: Use a Single Background Property to Put Back the Picture of Me in Its Place From Example 2