Put all the styles for this assignment into this page so you don't clutter up your main style sheet. If you end up using a background image in your course page, then obviously those styles would go in your main external style sheet.
Create your own background image that will tile seamlessely (hopefully) as I explained in class. I'll call the technique covered in class, horizontal/vertical reflection. Ideally, you'll make one that compliments the aesthetic of your course page, but that's not required. You need to make a fairly small graphic (50x50 or 100x100 or whatever) that will actually tile when used as a background image. Using the HTML
img element (not inserted as as a background) put the following below this paragraph. The original graphic before the horizontal/vertical reflection trick and the resulting background image so I can see it without tiling as a background. Include a short description so that I know which one is which (even thought it should be obvious).
Tile the background in both the X and Y directions (that's the default behavior) in this block.
Q: How much of the box (think box model) does the background fill?
Put the small image you created at the beginning of this assignment inside this block as a background image that does not repeat in either the X or Y directions. Center it vertically, and place it 100px from the right border. You can tell that it's a background graphic (instead of img tag) because the lorem ipsum text will be on top of the graphic.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
Put a tall, thin gradient background image (around 10px in width give or take) that tiles only in the X direction. (You can use a thin, wide gradient image that tiles only in the Y direction if you would prefer.) Either way, make sure it fades away to nothing (from a solid color to white) between about 1/2 to 3/4 of the height of the block (or width if you did repeat-y).
Use the built-in gradient capability that just became available in CSS3 to try to replicate the above experiment with gradient graphics. In particular, none of the examples in the W3Schools page fade to nothing, so see if you can figure out how that can be done with pure CSS gradients.