Introduction
|
Many HTML elements support the ability to be painted with a background, using color or a picture. This dated back to the creation of such elements as body, table, and td. On one hand, these elements happened to have limitations in their support of background pictures. On the other hand, there appeared a need to let almost any HTML element be painted anyway a webmaster wants. Rather than providing this functionality to individual HTML elements, the solution was to let CSS handle it so that any HTML element that needs that functionality can simply "borrow" it.
|
The Background Style
To let you control the background of a box or element, CSS provides a style named background. It is used for any of the styles we will see in this lesson.
The Background Color of an Element
The primary way to highly text or to paint a box is to apply a color to it. You have two options. You can use either the background or the background-color style. Here are examples:
<!DOCTYPE html>
<html>
<head>
<title>The Metric System</title>
<style type="text/css">
body {
margin: 0;
background-color: #F0EBE1; /* rgb(240, 235, 225); */
}
#common-container {
width: 600pt;
margin: auto;
border: 0pt solid Black;
}
#top-left-box {
margin-top: 0.85em;
margin-left: 0.70em;
right: 0;
bottom: auto;
width: 10em;
height: 31.00em;
background-color: #643200; /* rgb(100, 50, 0); */
border: 1pt solid #643200;
}
#top-banner {
right: auto;
top: 0.15em;
margin-left: 11.30em;
bottom: auto;
width: 38.00em;
height: 3.65em;
line-height: 1.25em;
position: absolute;
border-bottom: 3pt solid #643200;
}
#central {
top: 4.75em;
margin-left: 11.00em;
right: auto;
width: 27.75em;
height: auto;
bottom: auto;
overflow: auto;
position: absolute;
}
#right-box {
top: 4.75em;
right: auto;
margin-left: 39.30em;
width: 10em;
height: 27.25em;
bottom: auto;
position: absolute;
border: 1pt solid Black;
background-color: #C8915A; /* rgb(200, 145, 90); */
}
#bottom-left-box {
margin-top: 0.55em;
margin-left: 0.70em;
right: 0;
bottom: auto;
width: 10em;
height: 2.25em;
background-color: #9B6432; /* rgb(155, 100, 50); */
border: 1pt solid #643200;
}
#bottom-middle-box {
top: 32.60em;
margin-left: 11.35em;
margin-right: 0;
bottom: auto;
width: 27.30em;
height: 2.25em;
position: absolute;
background-color: #643200;
border: 1pt solid #643200;
}
#resources {
font-size: 10pt;
text-align: center;
line-height: 0.75em;
color: #CCCC00;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
#bottom-right-box {
top: 32.60em;
margin-left: 39.30em;
margin-right: 0;
bottom: auto;
width: 10em;
height: 2.25em;
position: absolute;
background-color: #9B6432; /* rgb(155, 100, 50); */
border: 1pt solid #643200;
}
#bottom-bar {
left: 0;
right: 0;
bottom: auto;
top: 35.25em;
width: 100%;
height: 0.50em;
position: absolute;
background-color: Black;
}
#bottom-banner {
left: 0;
right: 0;
bottom: 0;
top: 35.70em;
width: 100%;
height: auto;
position: absolute;
background-color: #643200; /* rgb(100, 50, 0); */
}
#top-title {
color: #400;
line-height: 0.15em;
font: bold 24pt Georgia, Garamond, serif;
text-shadow: 0.10em 0.10em 0.08em rgb(255, 190, 0);
}
#metrics-topics {
color: maroon;
background-color: #CC9900;
}
#metrics-fields {
color: Yellow;
background-color: #800000;
}
#metrics-topics, #metrics-fields
{
border-top: 1pt solid #FF9933;
border-bottom: 1pt solid #FF9933;
}
.metric-field { color: #800 }
.sect-title {
background-color: #CC9900;
border-bottom: 2pt purple solid
}
.systems {
margin-top: 0.250em;
margin-left: 0.250em;
}
p {
margin-left: 4pt;
text-align: justify;
}
dl {
width: 9em;
padding-left: 0.50em;
list-style-type: none;
}
dt {
color: #CCCC00;
padding-left: 0.50em;
border-bottom: 1pt #FFF dotted;
}
.pict-container { margin-left: 0.5em; }
.picture {
float: left;
margin: 0;
border: 1pt solid black;
}
.description {
color: #400;
text-align: justify;
font: 12pt Times New Roman, Garamond, serif;
}
#copyright {
color: Pink;
text-align: center;
line-height: 1.15em;
}
p, .metric-field { font-size: 10pt; }
.clearance { clear: left }
</style>
</head>
<body>
<div id="common-container">
<div id="top-left-box">
<dl>
<dt id="metrics-topics">Metrics Topics</dt>
<dt>Area</dt>
<dt>Work</dt>
<dt>Angle</dt>
<dt>Sound</dt>
<dt>Speed</dt>
<dt>Force</dt>
<dt>Power</dt>
<dt>Stress</dt>
<dt>Energy</dt>
<dt>Volume</dt>
<dt>Amount</dt>
<dt>Density</dt>
<dt>Distance</dt>
<dt>Velocity</dt>
<dt>Pressure</dt>
<dt>Intensity</dt>
<dt>Frequency</dt>
<dt>Temperature</dt>
<dt>Acceleration</dt>
<dt>Eletric Current</dt>
<dt>Metric Conversions</dt>
</dl>
</div>
<div id="top-banner">
<p id="top-title">The Metric System</p>
</div>
<section id="central">
<p class="description">The metric system is a set of standard measurements that
provides a common standard for different countries, organizations, and cultures
to share numeric values. The values address length, mass, and time.</p>
<p class="sect-title">Length</p>
<div class="pict-container">
<img class="picture"
alt="Metric System - Length"
height="65"
src="images/length.png"
width="100" />
<p class="description">Length is used to measire the distance. The values are
in scales with the meter (or metre) as the
central point. Variants include the milimeter and the kilometer.</p>
</div>
<div class="clearance"></div>
<p class="sect-title">Weight</p>
<div class="pict-container">
<img class="picture" alt="Metric System - Mass and Weight" height="67"
src="images/weight.png" width="100" />
<p class="description">The mass or weight measures the gravity of an object.
It is expressed in numbers that have the gram as its central unit.</p>
</div>
<div class="clearance"></div>
<p class="sect-title">Time</p>
<div class="pict-container">
<img class="picture" alt="Metric System - Date and Time" height="65"
src="images/time.png" width="100" />
<p class="description">The time measures regular lapses or occurrences. Units
include days, months, years, decades, centuries, but also hours, minutess,
seconds, and miliseconds</p>
</div>
</section>
<div id="right-box">
<dl>
<dt id="metrics-fields">Metrics Applications</dt>
<dt class="metric-field">Engineering Majors</dt>
<dt class="metric-field">Mathematics</dt>
<dt class="metric-field">Chemistyy</dt>
<dt class="metric-field">Time Zones</dt>
<dt class="metric-field">TCP/IP</dt>
<dt class="metric-field">Taxes</dt>
<dt class="metric-field">Gravity</dt>
<dt class="metric-field">Chronological Order</dt>
<dt class="metric-field">Worksheets/Grids</dt>
<dt class="metric-field">Statistics</dt>
<dt class="metric-field">Coordinate Systems</dt>
<dt class="metric-field">Pythagorean System</dt>
<dt class="metric-field">Calendars</dt>
<dt class="metric-field">Medications</dt>
<dt class="metric-field">Solar System</dt>
<dt class="metric-field">Roads Systems</dt>
<dt class="metric-field">Phone Systems</dt>
<dt class="metric-field">Papers/Articles</dt>
</dl>
</div>
<div id="bottom-left-box">
<img alt="Calendar Systems" height="29"
src="images/calsys.png" width="148" class="systems">
</div>
<div id="bottom-middle-box">
<p id="resources">History of Metric System | International Standards | Resources</p>
</div>
<div id="bottom-right-box">
<img alt="Time Zones" height="25"
src="images/tz.png" width="103" class="systems">
</div>
</div>
<div id="bottom-bar">
</div>
<footer id="bottom-banner">
<p id="copyright">Copyright ©, 2015</p>
</footer>
</body>
</html>
This would produce:
The Gradient Color of an Element or Box
Instead of using a uniform appearance, a box can be painted with a grandient color that changes from one side or corner of the box to another
side or corner. Here are examples:
<html>
<head>
<title>Chemistry</title>
<style type="text/css">
body {
margin: 0;
background: radial-gradient(at 65%, #0066CC, #99CCFF);
}
#top-banner {
margin: 0;
width: 100%;
height: 8.00em;
position: absolute;
background: linear-gradient(#336699 92%, #336699 5%, #003366);
}
#top-box {
height: 4.95em;
top: 2.85em;
background: linear-gradient( #003366, #D7EBFF);
}
#middle-center {
height: 23.00em;
top: 2.75em;
background-color: #D7EBFF;
}
#bottom-box {
height: 4.95em;
top: 2.70em;
background: linear-gradient(#D7EBFF, #003366);
}
#top-box, #middle-center, #bottom-box {
left: 0;
margin: auto;
width: 600pt;
position: relative;
border: 1pt solid Black;
}
#title-box {
margin-top: 0;
height: 30pt;
margin-left: 0pt;
border-bottom: 2pt solid Black;
background: linear-gradient(90deg, #0066CC, #D7EBFF);
}
#chem-title {
font-size: 24pt;
color: #FFF;
font-weight: bold;
font-family: Georgia, "Times New Roman", Times, serif;
}
.mol-container { margin-left: 0.00em; }
.molecule {
margin: 0;
float: left;
}
#definitions { margin-left: 2.75em }
#resources { margin-left: 29.50em }
#support { margin-left: 39.00em }
#studies {
margin-left: 12.25em;
width: 15.80em;
}
#definitions, #resources, #support { width: 8.00em }
#studies, #definitions, #resources, #support {
top: 15.50em;
right: auto;
height: 6.75em;
bottom: auto;
position: absolute;
border: 1pt solid Navy;
background: linear-gradient(145deg, #99CCFF, #CAE4FF);
}
#bottom-banner {
margin: 0;
bottom: 0;
width: 100%;
height: auto;
top: 31.00em;
position: absolute;
background: linear-gradient(#036 2%, #336699 5%, #336699 92%);
}
.description {
color: Navy;
padding-left: 0.50em;
padding-right: 0.50em;
text-align: justify;
font: 12pt Times New Roman, Garamond, serif;
}
.heading {
font-weight: bold;
height: 1.50em;
color: Yellow;
background-color: #0033CC;
border-bottom: 2pt solid Yellow;
}
.heading, .item-inside, .item-last {
font-size: 9pt;
width: 10.00em;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.item-inside, .item-last { color: navy; }
.item-inside { border-bottom: 1pt dashed White; }
</style>
</head>
<body>
<div id="top-banner"></div>
<div id="bottom-banner"></div>
<div id="top-box">
</div>
<div id="middle-center">
<div id="title-box">
<p id="chem-title">Chemistry</p>
</div>
<div>
<img alt="Chemistry - Molecule" height="145" src="images/molecule.png"
width="236" class="molecule">
<p class="description">Chemistry is the study of matter. Matter is the
building block of anything in the environment. Chemistry starts by examining
the smallest object that starts a matter. This is the role of the atom. Then
chemistry explores the interactions between two atoms and among atoms. The
study seeks to understand how an atom of a kind, called a substance, combines
to another atom of the same substance, or how an atom of one substance
combines with one or other atoms of other substances to produce a new
substance. A combination of atoms is also called a bond. The resulting
object is called a compound. Of course, there are rules that govern
everything.</p>
</div>
<div id="definitions">
<table>
<tr>
<td class="heading">Definitions</td>
</tr>
<tr>
<td class="item-inside">Atoms</td>
</tr>
<tr>
<td class="item-inside">Molecules</td>
</tr>
<tr>
<td class="item-inside">Bonds</td>
</tr>
<tr>
<td class="item-last">Compounds</td>
</tr>
</table>
</div>
<div id="studies">
<table>
<tr>
<td class="heading" colspan="2">Fields of Studies</td>
</tr>
<tr>
<td class="item-inside">Chemistry</td>
<td class="item-inside">Physics</td>
</tr>
<tr>
<td class="item-inside">Biochemistry</td>
<td class="item-inside">Medicime</td>
</tr>
<tr>
<td class="item-inside">Biology</td>
<td class="item-inside">Education</td>
</tr>
<tr>
<td class="item-last">Geology</td>
<td class="item-last">Mathematics</td>
</tr>
</table>
</div>
<div id="resources">
<table>
<tr>
<td class="heading">Resources</td>
</tr>
<tr>
<td class="item-inside">Periodic Tables</td>
</tr>
<tr>
<td class="item-inside">Games</td>
</tr>
<tr>
<td class="item-inside">Microscopes</td>
</tr>
<tr>
<td class="item-last">Lab and Art</td>
</tr>
</table>
</div>
<div id="support">
<table>
<tr>
<td class="heading">Support</td>
</tr>
<tr>
<td class="item-inside">About Us</td>
</tr>
<tr>
<td class="item-inside">Contact Us</td>
</tr>
<tr>
<td class="item-inside">Chemistry Careers</td>
</tr>
<tr>
<td class="item-last">Videos</td>
</tr>
</table>
</div>
</div>
<div id="bottom-box"></div>
</body>
</html>
This would produce:
If a browser doesn't support gradient colors, you can apply both the gradient color and the background color to the background style, in that order. The values are separated by an empty space.
The Background Picture of a Webpage or an HTML Element
Remember that a webpage, a box, or an HTML element can be
covered with a a picture of your choice. Here is an example:
<!DOCTYPE html>
<html>
<head>
<title>Exercise</title>
<style type="text/css">
body {
margin: 0;
background-image: URL(images/bg1.png) }
</style>
</head>
<body>
</body>
</html>
This would produce:
In the same way, you can create or design various pictures
to use as background pictures for different boxes. Here are examples:
Here is a CSS file named history.css:
body { margin: 0 }
#top-banner, #top-container { height: 475px }
#top-banner { width: 100% }
#top-container, #central-container, #bottom-container { width: 1080px }
body, #central-banner { background-color: white }
#top-container, #central-container, #pre-bottom-container,
#bottom-container, #copyside { margin: auto }
#top-container
{
background-image: url('../images/bg7.png');
}
#central-banner
{
width: 100%;
background-color: white;
}
#central-container
{
height: 300pt;
background: white;
}
#left-central
{
width: 52px;
float: left;
height: 100%;
display: inline-block;
background-image: url('../images/bg3.png');
}
#central
{
width: 725pt;
}
#right-central
{
width: 52px;
float: right;
height: 100%;
display: inline-block;
background-image: url('../images/bg4.png');
}
#pre-bottom-banner
{
bottom: 150px;
position: absolute;
width: 100%;
height: 10px;
background-image: url('../images/bg6.png')
}
#pre-bottom-container
{
height: 10px;
width: 1080px;
background-image: url('../images/bg5.png');
}
#right-central
{
width: 52px;
float: right;
display: inline-block;
background-image: url('../images/bg4.png');
}
#bottom-banner, #bottom-container { height: 150px }
#bottom-banner
{
bottom: 0;
position: absolute;
width: 100%;
}
#top-banner, #bottom-banner { background-image: url('../images/bg1.png') }
#bottom-container { background-image: url('../images/bg2.png') }
#topics, #studies
{
float: right;
width: 620px;
}
#topics
{
margin-right: 30pt;
margin-top: 140pt;
}
#studies { margin-right: 30pt }
.sub-title
{
font-weight: 600;
color: #FFCC00;
border-bottom: 1pt solid Orange;
font-family: Georgia, "Times New Roman", Times, serif;
}
#central, .categories { float: left }
.categories { width: 200px }
.categories ul { list-style-type: none }
#introduction
{
font-size: 14pt;
color: maroon;
text-align: justify;
font-family: Georgia, Cambria, Cochin, Times, "Times New Roman", serif
}
#copyside
{
padding-top: 0.50em;
width: 600px;
}
#copyright
{
font-size: 12pt;
text-align: center;
color: #FFCC00;
font-family: Georgia, "Times New Roman", Times, serif;
}
.categories a:link, .categories a:active, .categories a:visited, .categories a:hover
{
font-size: 12pt;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
}
.categories a:link { color: #FFFF66 }
.categories a:active { color: #FF66FF }
.categories a:visited { color: #FF9900 }
.categories a:hover
{
color: #FFFF99;
border-bottom: 2pt dotted #CCFFFF
}
Here is the main file for the site:
<!DOCTYPE html>
<html>
<head>
<title>Social Science: History</title>
<link href="styles/history.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="top-banner">
<div id="top-container">
<div id="topics">
<div class="categories">
<ul>
<li class="sub-title">Categories</li>
<li><a href="../categories/continents.htm">By Continent</a></li>
<li><a href="../categories/countries.htm">By Country</a></li>
<li><a href="../categories/industry.htm">By Industry</a></li>
<li><a href="../categories/countries.htm">By Science</a></li>
</ul>
</div>
<div class="categories">
<ul>
<li class="sub-title">Touristics Sites</li>
<li><a href="../sites/countries.htm">By Country</a></li>
<li><a href="../sites/types.htm">By Type</a></li>
<li><a href="../sites/landmarks.htm">Landmarks</a></li>
<li><a href="../figures/entertainment.htm">Entertainment</a></li>
</ul>
</div>
<div class="categories">
<ul>
<li class="sub-title">Historical Events</li>
<li><a href="../events/country.htm">By Country</a></li>
<li><a href="../events/politics.htm">In Politics</a></li>
<li><a href="../events/industry.htm">By Industry</a></li>
<li><a href="../events/entertainment.htm">In Entertainment</a></li>
</ul>
</div>
</div>
<div id="studies">
<div class="categories">
<ul>
<li class="sub-title">Historical Effects</li>
<li><a href="slavery.htm">Slavery</a></li>
<li><a href="colonization.htm">Colonization</a></li>
<li><a href="emperialism.htm">Emperialism</a></li>
<li><a href="terrorism.htm">Terrorism</a></li>
</ul>
</div>
<div class="categories">
<ul>
<li class="sub-title">Social Sciences</li>
<li><a href="languages.htm">Languages</a></li>
<li><a href="politics.htm">Poitical Systems</a></li>
<li><a href="commerce.htm">Commerce</a></li>
<li><a href="anthropology.htm">Anthropology</a></li>
</ul>
</div>
<div class="categories">
<ul>
<li class="sub-title">Historic Figures</li>
<li><a href="../figures/science.htm">Science/Technology</a></li>
<li><a href="../figures/industry.htm">By Industry</a></li>
<li><a href="../figures/politics.htm">Politics</a></li>
<li><a href="../figures/entertainment.htm">Entertainment</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="central-banner">
<div id="central-container">
<div id="left-central"></div>
<div id="central">
<p id="introduction">History is the study of the creation and evolution
of the universe, including anything in that universe: the solar system,
the continents, the countries, the humans, the animals, etc. History
also studies anything that has contributed or influenced, positively
or negatively, those entities. These include social sciences, technologies,
wars, political systems, religions, education, wellbeing,
entertainment, just to name a few.</p>
</div>
<div id="right-central"></div>
</div>
</div>
<div id="pre-bottom-banner">
<div id="pre-bottom-container">
<div id="pre-bottom-right"></div>
</div>
</div>
<div id="bottom-banner">
<div id="bottom-container">
<div id="copyside">
<p id="copyright">Copyright © 2015, FunctionX</p>
</div>
</div>
</div>
</body>
</html>
This would produce: