Home

Introduction to the Background of a Box

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:

Length Weigth - Mass Time Calendar System Time Zone
<!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 &copy;, 2015</p>
</footer>

</body>
</html>

This would produce:

The Background Color of an Element

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:

Molecule

<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:

The Background Color of an Element

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:

The Background Picture of a Webpage or an HTML

<!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:

Preview

In the same way, you can create or design various pictures to use as background pictures for different boxes. Here are examples:

Background Picture Background Picture Background Picture Background Picture

Background Picture

Background Picture

Background Picture

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 &copy; 2015, FunctionX</p>
    </div>
  </div>
</div>
</body>

</html>

This would produce:

The Background Picture of a Webpage or an HTML Element

 
 
 
   
   
 

Previous Copyright © 2015-2016, FunctionX Next