This example uses the background-color, background-image, background-position and background-attachment styles to place the CSI logo in the bottom right corner of the page. Notice how the logo stays in the proper position when you resize the browser window. The background-color is overwritten by the image

The background-image property specifies the file name of the image; url(...) is required.

    The background-position property may use the keywords top, bottom, left, center, right or by specifying a horizontal length and then a vertical length. For example try background-position: 50%, 40px; in the embedded style sheet here.

    The background-repeat property is used to tile the background image. Here it is set to no-repeat. Try repeat, repeat-x,and repeat-y to see what happens

    The background-attachment: fixed property locks the background image as specified by the background-position, so that scrolling the browser will not move the image. You should try the default, which is scroll. Did you see a difference? If not, try making this page much longer with background-position: 50% right to see what happens.

The text-indent property is used to indent the first line of text in the element, in this case a <p> or paragraph element, by the given amount. Experiment with different values to see the result. Also note that the above 'paragraphs' are not indented the correct amount! Why?

Click here to continue with tutorial part 8