Final - Part 3: Images Explained

CS 50.11C - Cascading Style Sheets

David Hanson - Section 1384

Images from Ocean Garden explained

- Link to Ocean Garden web site -

• divider01.jpg:
• divider02.jpg:
• divider03.jpg:
• divider04.jpg:
• divider05.jpg:
• divider06.jpg:
• The divider images shown above are used below the top heading and the paragraphs below, and give the look of an underwater shadow effect. Specifically, below the These images do not repeat, and are found in the backgound of the following divs (in order from divider01.jpg to divider06.jpg): quickSummary, preamble, explanation, participation, benefits, requirements.

• h1.gif:
• h2.gif:
• h3_about.gif:
• h3_archives.gif:
• h3_benefits.gif:
• h3_participation.gif:
• h3_requirements.gif:
• h3_resources.gif:
• h3_road.gif:
• h3_select.gif:
• summary.gif:
• These are all the images used to replace the header text. Interesting idea, and fun to learn how to do it. These images are assigned to the h1, h2, and h3 tags. For the h3 tags, the images are assigned to the classes shown in the name - i.e. h3_about.gif is assigned to the class 'about' as part of a descendant selector. Likewise, for 'summary.gif', this image is assigned to the paragraph 'p1' class that is within the quickSummary ID section.

• fish01.jpg:
• fish_bottom.gif:
• fish_top.gif:
• These are the fish images appearing here and there on the web page. The fish01.jpg is in the extraDiv3 div, and is a non-repeating background image that is positioned 4% from the right, 960 pixels from the top, with a width of 300 pixels and a height of 123 pixels. The fish_bottom.gif is in the extraDiv3 div, and is a non-repeating background image positioned 1000 pixels from the top, with a width of 224 pixels and a height of 108 pixels. The fish_top.gif is in the extraDiv5 div, and is a non-repeating background image positioned 220 pixels from the top, 20 pixels from the left, with a width of 180 pixels and a height of 80 pixels.

• clouds.jpg:
• sunlight.jpg:
• water_edge.jpg:
• These three images make up the top of the page and appear in the divs extraDiv1, extraDiv4, and extraDiv2 respectively. The clouds.jpg image repeats horizontally across the page, at 100% of the width, with a height of 104 pixels, starting in the upper-most top right position. The sunlight.jpg image is a non-repeating background image positioned 0 pixels from the top, 0 pixels from the left, with a width of 224 pixels and a height of 481 pixels. The water_edge.jpg image is a background image that repeats horizontally across the page, uses 100% of the width, at a height of 75 pixels, starting 104 pixels from the top, and 0 pixels from the right.

• gradient_bg.jpg:
• The gradient_bg.jpg appears in the background of the body div, and repeats horizontally across the screen.

• seafloor.jpg:
• seafloor_bg.jpg:
• Both of these images can be found at the bottom of the page. I like how there is the light of day at the top of the page with clouds and the surface of the water, then the darkening gradient down the page until you reach these seafloor images. The seafloor.jpg image appears in the extraDiv6 div, and is a horizontally repeating background image positioned 125em from the top, 0 pixels from the left, with a width of 100%, and a height of 426 pixels. The seafloor_bg.jpg image appears on the span tag of the extraDiv6 div, and is a non-repeating background image positioned 0 pixels from the top, with a width of 633 pixels and a height of 426 pixels.