Helping ordinary people create extraordinary websites!
HOME TUTORIALS SCRIPTS WEB HOSTING BLOG FORUM
Get Our Newsletter
Email:

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

By Will Bontrager
2003-10-15


The Background Behind Sections of Text Content

Background color and images can be specified for standard HTML tags for text content, too. It is almost identical to the DIV and table style specifications, except no period is typed in front of the style. (The period indicates a custom class. Lack of a period indicates a style for a standard HTML tag.) Standard HTML tags for text content do not have the ability to be sized except for the amount of area the text itself requires.

To specify a background of yellow for H1 (header size 1) text and an image background for P (paragraph) text, put this in the HEAD section of your web page:

<style type="text/css">
<!--
H1 { background-color: yellow; }
P { background-image: url(image.jpg); }
-->
</style>

Now, in the following page copy, the header will have a yellow background and each paragraph will have an image as its background. Example:

<H1>My Header</H1>
<P>A paragraph.</P>
<P>Another paragraph.</P>

Image tiling and positioning are specified using the same specifications language as the class for DIV sections.

Tutorial 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


 | Bookmark
Related Tutorials:
» Planning Your Stylesheet - The Definitive Guide
» CSS Shorthand Properties
» Print Stylesheet - The Definitive Guide
» Using CSS Selectors to Highlight Unedited Form Fields
» An Introduction to CSS
» Overlapping tabbed navigation in CSS

Ask A Question
characters left.