.
Developer Spot - Web Development Tutorials
arrowDeverloper Spot  Tutorials  CSS  Cascading Style Sheets (CSS); Backgrounds (part 2 of 2)  
 
Development Tutorials
ASP
CGI & Perl
CSS
HTML
Java
JavaScript
Linux
PHP
XML




More Resources
Web Hosting Articles
Web Development News
PHP Manual
Web Hosting Directory
Budget Web Hosting Linux Web Hosting Small Business Hosting
Windows Web Hosting Reseller Web Hosting Web Hosting Articles

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

By Will Bontrager
2003-10-15
Reader Rating: 4 out of 5
Bookmark Print Version
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.


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



 
Development Tutorials: CGI & Perl - CSS - HTML - Java - JavaScript - Linux - PHP - XML
More Resources: Web Hosting Articles - Web Development News - PHP Manual