Web Design 35S‎ > ‎CSS‎ > ‎

Playing with CSS Backgrounds

(You don't need a sketch for this assignment.)
  1. As in the previous assignment, create a directory for yourself.
  2. In that directory create a page called index.html.
  3. Create a stylesheet, possibly called something like stylesheet.css.
  4. In the head of your index page, link the index page to the style sheet. If you need the command for that, go to Using CSS and grab it from there.
  5. In your stylesheet set your background color to yellow (or pink, or blue...) with the command body {background-color: yellow;}
  6. Now go and find yourself a picture.
  7. Make it a fairly small picture, maybe about 100 pixels by 100 pixels.
  8. The exact size doesn't matter, just make it fairly small.
  9. If you need to edit the picture to make it smaller, try doing it online at a site like www.picmonkey.com or www.photoshop.com.
  10. Save it in the same directory as your index.html page.
  11. Okay, now go back to your stylesheet. Type in the command body {background-image: url('whateveryourpicturenameis.jpg')} That looks pretty good so far, right?
  12. Well, you can do way more interesting things with a background image when you're using CSS. Just like in math, a page is set up in an x direction and a y direction. You can make your image "tile" in the x direction, the y direction, or even the z direction (but more on z later).
  13. You'll want to have your image only in the y direction/axis. In your stylesheet type: body{background-image: url('whateveryourpicturenameis.jpg');background-repeat: repeat-y}
  14. You can do the same thing in the x/horizontal axis with the command: body{background-image: url('whateveryourpicturenameis.jpg');background-repeat: repeat-x}
  15. With a little bit of help, you can position your background picture just about anywhere you want.
  16. You can even set your background image so it doesn't move when you scroll your page.
body {background-image: url('smiley.gif');background-repeat:no-repeat;background-attachment: fixed}
  • This is a cool but kind of weird looking effect.
    1. Using what you've learned here, and getting some help from W3 Schools, create a small webpage on
    2. Penguins,
    3. Squirrel,
    4. or Chickens
    Your page should have (all set up in the stylesheet)
    • a background image that tiles vertically across the middle of the page.
    • a background color different than the image.
    • right aligned text.
    • a background color for your text that's different than the background color for you main page.
    • some sort of border around the text.
  • ĉ
    James Dykstra,
    Jan 11, 2011, 6:12 AM
    James Dykstra,
    Apr 19, 2010, 7:32 AM