Cascading Style Sheets (CSS); Backgrounds (part 2 of 2)

Reader Rating:

<style type="text/css">
<!--
LI { background-color: yellow; }
UL { background-image: url(image.jpg);
background-repeat: no-repeat; }
OL { background-image: url(image.jpg); }
-->
</style>

<ul>
<li>
<p>A list item.</p>
</li>
<li>
<p>Another list item.</p>
</li>
</ul>

<ol>
<li>
<p>A list item.</p>
</li>
<li>
<p>Another list item.</p>
</li>
</ol>

In the above lists, the list items have paragraph spacing. The area taken up with each list as a whole will contain the specified background image. The list items will have a yellow background, which covers the image wherever the list item text is printed.

Now you have a lot of tools related to using background colors and images to help you design awesome web pages.


Article Pages:

	Introduction
	The Background of Divisions of the Web Page, Within DIV Tags
	The Background of Tables
	The Background Behind Sections of Text Content
	The Background Behind INPUT and TEXTAREA Form Elements
	Example for the HEAD section
	The Background Behind Ordered and Unordered Lists
	Here are examples for the HEAD area

Copyright 2004 Bontrager Connection, LLC

 Rate this article:   Poor          Excellent 

If you found this article interesting, you may want to read these as well:

» Cascading Style Sheets (CSS); Backgrounds (part 1 of 2)

» Cascading Style Sheets (CSS); Learning More

» Cascading Style Sheets (CSS); Getting Started