(You don't need a sketch for this assignment.)
- As in the previous assignment, create a directory for yourself.
- In that directory create a page called index.html.
- Create a stylesheet, possibly called something like stylesheet.css.
- 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.
- In your stylesheet set your background color to yellow (or pink, or blue...) with the command body {background-color: yellow;}
- Now go and find yourself a picture.
- Make it a fairly small picture, maybe about 100 pixels by 100 pixels.
- The exact size doesn't matter, just make it fairly small.
- 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.
- Save it in the same directory as your index.html page.
- Okay, now go back to your stylesheet. Type in the command body {background-image: url('whateveryourpicturenameis.jpg')} That looks pretty good so far, right?
- 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).
- 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}
- You can do the same thing in the x/horizontal axis with the command: body{background-image: url('whateveryourpicturenameis.jpg');background-repeat: repeat-x}
- With a little bit of help, you can position your background picture just about anywhere you want.
- 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.
- Using what you've learned here, and getting some help from W3 Schools, create a small webpage on
- Penguins,
- Squirrel,
- 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.
|
 Updating... ĉ James Dykstra, Jan 11, 2011, 6:12 AM James Dykstra, Apr 19, 2010, 7:32 AM
|
