CSS title
CSS Text MoreCSS Text CSS Structure Images / Background CSS Linking Quick Reference


Images and Background

Replaced Elements

Both IMG and OBJECT are considered replaced elements in CSS. These are replaced by an image or an object such as a button or a form element. CSS considers the object just as if it were an image. To CSS, the content of a replaced element is irrelevant; the content comes from another source and is considered to be just a rectangular box in the HTML page. What the image or object is or looks like is determined by outside factors.

The IMG is simple to work with. It has only two attributes, SRC and Alt. The SRC attribute contains the address of the image file that is to be linked to the page. The Alt attribute is a text description of the image. The object is much more complicated. There are more than a dozen attributes. The DATA attribute works the same as the SRC attribute. It is the address of the object's file. Here is an example of an object's syntax.

<OBJECT DATA = "movie.avi">
You can put text information about the object here much like the ALT attribute
</OBJECT>

Here are a few of the things you can do with replaced elements.

Positioning replaced elements

Something to remember that comes in handy with positioning images is that you can set the margin around the image. Specifically, you can set the margin (or padding in this case) to the side in which you are most concerned.
IMG. smileyface.jpg {float: left; margin-left:5em}

Background

The background properties with CSS are a vast improvement over HTML. You have a much-improved control over the behaviors of your background using CSS. Here are the properties associated with the background.

Background-color property

This is the same as specifying a background color with HTML. The only difference is the syntax. You can also determine the background colour of a block. For instance you can set the background colour for a paragraph or a heading.
Body {background-color: black}
P {background-color: #FF0000}

With CSS you can specify a color by name, RGB values or hexadecimal values.

Background-image property

The background image property is the same as specifying a background image with HTML. One thing to note is that you should use a background colour along with the image. There is no cost in load time, and there are some advantages. A coloured background can be used to fill the screen while the background image loads, and it is used in place of the image if the image cannot be loaded.
BODY {background-image: url(woodbac.gif); background-color: brown}

background-repeat property

This allows you to determine how an image is repeated across or down a page. The background-repeat property has four values.

BODY {background-image: url(bubbles.gif); background-repeat: repeat-x; background-position: center}

background-attachment property

This property can be used to give some very interesting effects. IE has had a similar property since version 3 called the "fixed" property. With CSS, the "fixed" background is cross browser. The background-attachment property determines whether the image should be fixed or moveable on the page. It has two values, scroll or fixed It's very cool when used properly. .
BODY {background-color: green; background-image: url(jungle.jpg); background attachment: fixed}

background-position property

This property lets you override the default position of an image and specify the image's initial position. You can also use this property in conjunction with the background-attachment property to have an image stay where you place it. The values of this property are percentage, length, or the keywords top, center, bottom, left or right. Here are some examples

BODY {background-position: 20% 60%; background-image: url(CSStitle.gif)}
BODY {background-image: url(marble.gif); background-position: 5cm 3cm}
BODY {background-image: url(cement.jpg); background-position: top center}

With some experimentation, you should be able to control the layout and look of you web pages with the CSS described here. Granted, many of the selectors, properties and values have been left out for brevity sake. There is a complete list on the properties and values quick-reference page. Check this page to see what is available to you.

CSS Text MoreCSS Text CSS Structure Images / Background CSS Linking Quick Reference

This site produced by Power Verbs