1. You can use the background-image property of Cascading Style Sheets to place an image into the background of any image.

To do this, you use the value of url -- and then write the url of the web location where the background image is stored. It's simplest to either put an entire, absolute url (http://www.mydomain.com/images/flowers.gif) or to use a relative url where the background image file is stored in the same folder as your stylesheet file (flowers.gif).

Say you want to use an image of yellow flowers behind a certain paragraph of text.

p.flowers  {background-image: url(flowers.gif);

<p class="flowers">
This text will be superimposed over a background of the flowers.gif image.
</p>

The image will "tile." That means it will be repeated so that it fills up the available space.


2. You can use Cascading Style Sheets to place an image into the background of your entire web page just as with HTML, but with CSS you have more control.

Use the background-repeat property. It has the following values:

repeat-x -- repeats the image only along the x or horizontal axis

repeat-y -- repeats the image only along the y or vertical axis

no-repeat -- displays the image only one

repeat -- the default value of ordinary tiling.

Putting this in your style sheet:

body {background-image: url(flowers.gif); background-repeat: repeat-y;}

would repeat the flowers only along the up and down left border. (By default, images start in the upper left hand corner.)


3. You can use Cascading Style Sheets to position a background image anywhere on your web page. The values of the background-position property are:

top

center

bottom

left

right

You can combine the values. For example, "bottom right."

You must also include background-repeat: no-repeat.

To place one flower image at the bottom right of your web page:

body {
background-image: url(flowers.gif);
background-repeat: no-repeat;
background-position: bottom right;
}

4. You can apply the background-position property of Cascading Style sheets with the background-repeat property to change the position of a repeating background image from its default upper left hand corner default.

Let's say you want your flower image to repeat down the right side of the page instead of the left. You write:

body {
background-image: url(flowers.gif); 
background-repeat: repeat-x; 
background-position: right;
}

5. If you want your nonrepeated background image to remain always visible no matter what part of your (possibly long) web page your visitor is reading, you must use the Cascading Style Sheets background-attachment property.

Otherwise a non-repeated image will not always be visible.

The values of the background-attachment property are:

scroll -- this means the image will move as the web visitors scrolls

fixed -- the image remains fixed in the web visitor's screen

body {background-image: url(flowers.gif); 
background-repeat: no-repeat; 
background-position: center; 
background-attachment: fixed;
}

That will keep your one flower image securely anchored in the screen of your website visitors.


6. You can combine all the background related properties of Cascading Style Sheets into one property -- background. The values are:

background-color

background-image

background-repeat

background-attachment

background-position

These can be listed in any order. For example:

body {
background: white url(flowers.gif) center no-repeat fixed;
}

7. You can use Cascading Style Sheets to control the layout of a web page much more conveniently and powerfully than with HTML alone. CSS uses what's called the CSS box model.

In CSS, all elements are inside of a rectangular box with a height and a width. The actual contents of the element are within this height and width.

But there are other layers. In order, from the box itself are: the inner edge, padding, border, margin and outer edge.

And these areas are found on all four sides: right, left, top and bottom.


8. In Cascading Style Sheets, the width and height of an element are properties which can be defined using a fixed length, a percentage or the value of "auto", which is the default.

Generally, the width and height of an element are set by the browser to be as long as they need to be to display the content within the element, though no longer.


9. In Cascading Style Sheets, the terms padding and margin mean basically the same as with HTML. Padding is space inside the element. Then there's the border (often with a width of 0 so that it doesn't appear, but it's there nonethless). Margins are the space between elements.

In many cases, the length and width of the padding, border and margin will all 0, meaning that elements are displayed together with a normal amount of blank space between them. Sometimes you'll want to set a width for padding or margin or both to place more blank space between elements. It all depends on where you the web designer want your elements to appear -- how you want your page to appear.


10. In Cascading Style Sheets you can specify the blank space you want between elements by using the margin property. The value can be a specified length or percentage:

p {margin: 10px;}

will set a margin of 10 pixels around all paragraphs.
You can make margins on different sides different amounts. Say you want a more space on both sides of paragraphs than on the top and bottom. Specify the values in a row going clockwise: Top, Right, Bottom, Left:

p {margin: 5px 10px 5px 10px;}

You can also specify percentages of the element surrounded. To set paragraph margins that are 5% of the surrounded paragraph:

p {margin: 5%;}