Using shade image to as the title bar background

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Zion Narrows</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style rel="stylesheet" type="text/css">
/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License
*/

body {
  margin: 20px 0;
  padding: 0;
  background: #FFFFFF;
  font: normal small "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #666666;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

a {
  color: #5D0E0E;
}

a:hover {
  text-decoration: none;
  color: #FF0000;
}

.image {
  float: left;
  margin: 0 15px 10px 0;
}

/* Header */

#header {
  width: 760px;
  height: 120px;
  margin: 0 auto;
  background: #000000 url(zionarrows-images/img1.jpg);
}

#header h1, #header h2 {
  float: left;
  padding: 94px 0 0 7px;
  font-size: 18px;
}

#header a {
  text-decoration: none;
  color: #FFFFFF;
}

/* Pages */

#pages {
  clear: both;
  width: 760px;
  height: 43px;
  margin: 0 auto;
  background: #000000 url(zionarrows-images/img2.gif);
}

#pages h2 {
  display: none;
}

#pages ul {
  float: right;
  margin: 0;
  padding: 7px 0 0 0;
  list-style: none;
}

#pages li {
  display: inline;
}

#pages a {
  display: block;
  float: left;
  height: 25px;
  margin: 0 2px 0 0;
  padding: 7px 15px 0 15px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: -1px;
  font-size: 14px;
  font-weight: bold;
  color: #FFFFFF;
}

#pages a:hover, #pages .active a {
  padding-left: 14px;
  padding-right: 14px;
  background: #580505 url(zionarrows-images/img3.gif);
  border: 1px solid #000000;
  border-bottom: none;
}

/* Boxed */

.boxed {
  float: right;
  width: 180px;
  margin-bottom: 10px;
  padding-left: 10px;
}

.boxed .heading {
  height: 26px;
  padding: 6px 0 0 10px;
  background: #5F1010 url(zionarrows-images/img4.gif);
  border: 1px solid #000000;
  border-bottom: none;
  font-size: 1em;
  color: #FFFFFF;
}

.boxed .content {
  background: #F2F2F2 url(zionarrows-images/img5.gif) repeat-x left bottom;
}

.boxed .content ul {
  margin: 0;
  padding: 10px;
  list-style: none;
}

.boxed .content li {
  padding: 3px 0;
  border-top: 1px dotted #5D0E0E;
}

.boxed .content li.first {
  border: none;
}

.boxed .content a {
  padding-left: 10px;
  background: transparent url(zionarrows-images/img8.gif) no-repeat left center;
  text-decoration: none;
  color: #5D0E0E;
}

.boxed .content a:hover {
  color: #FF0000;
}

/* Posts */

.post {
  background: #F2F2F2 url(zionarrows-images/img5.gif) repeat-x left bottom;
}

.post .title {
  padding: 0 0 0 13px;
  background: #FFFFFF url(zionarrows-images/img9.gif) no-repeat left center;
  color: #000000;
}

.post .posted {
  padding: 2px 10px 4px 10px;
  background: #5F1010 url(zionarrows-images/img4.gif);
  border: 1px solid #000000;
  border-bottom: none;
  font-size: .7em;
  font-weight: normal;
  color: #FFFFFF;
}

.post .story {
  padding: 10px 20px;
}

.post .meta {
  padding: 1px 10px;
}

/* Content */

#content {
  width: 760px;
  margin: 0 auto;
  padding: 20px 0;
}

/* Posts */

#posts {
  float: left;
  width: 370px;
}

/* Archives */

#archives {
}

/* Search */

#search form {
  margin: 0;
  padding: 20px 10px;
}

#textfield1 {
  width: 110px;
  padding: 2px 5px;
  background: #894F4F url(zionarrows-images/img6.gif) repeat-x;
  border: 1px solid #000000;
  font: bold 10px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

#submit1 {
  width: 30px;
  background: #5F1010 url(zionarrows-images/img7.gif) repeat-x;
  border: 1px solid #000000;
  text-transform: uppercase;
  font: bold 9px "Trebuchet MS", Arial, Helvetica, sans-serif;
  color: #FFFFFF;
}

/* Footer */

#footer {
  clear: both;
  width: 760px;
  margin: 0 auto;
  background: #FFFFFF url(zionarrows-images/img5.gif) repeat-x;
}

#footer p {
  padding: 10px;
  font-size: .8em;
}
</style>


</head>
<body>
<div id="header">
  <h1><a href="">Zion Narrows</a></h1>
  <h2><a href="">Free CSS Templates</a></h2>
</div>
<div id="pages">
  <h2>Pages</h2>
  <ul>
    <li class="active"><a id="page1" href="">Home</a></li>
    <li><a id="page2" href="">My Photos</a></li>
    <li><a id="page3" href="">My Favorites</a></li>
    <li><a id="page4" href="">About Me</a></li>
    <li><a id="page5" href="">Contact Me</a></li>
  </ul>
</div>
<div id="content">
  <div id="posts">
    <div class="post">
      <h2 class="title">Welcome to Zion Narrows!</h2>
      <h3 class="posted">Posted on January 1th, 2007 by Author</h3>
      <div class="story">
        <p><em><strong>Zion Narrows</strong></em> is a free template from <strong>Free CSS Templates</strong> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The  header photo is from PDPhoto.org. You're free to use it for both commercial or personal use. I only ask that you link back to my site in some way. Enjoy :)</p>
      </div>
      <div class="meta">
        <p>Filed under <a href="" class="category">Uncategorized</a> | <a href="" class="comment">1 Comment &raquo;</a></p>
      </div>
    </div>
    <div class="post">
      <h2 class="title">Sample Tags</h2>
      <h3 class="posted">Posted on January 1st, 2007 by Author</h3>
      <div class="story">
        <p>An ordered list:</p>
        <ol>
          <li><a href="">Nullam et orci in erat viverra ornare.</a></li>
          <li><a href="">Suspendisse quis gravida massa felis.</a></li>
          <li><a href="">Curabitur malesuada turpis nec ante.</a></li>
        </ol>
        <p>A blockquote:</p>
        <blockquote>
          <p>&#8220;Et pulvinar pede ligula a  sapien. Donec fermentum condimentum nisi. Proin iaculis mauris id lorem  viverra molestie. Duis vel orci. Nam consequat. Morbi nec lacus.&#8221;</p>
        </blockquote>
      </div>
      <div class="meta">
        <p>Filed under <a href="" class="category">Uncategorized</a> | <a href="" class="comment">1 Comment &raquo;</a></p>
      </div>
    </div>
  </div>
  <div id="archives" class="boxed">
    <h2 class="heading">Archives</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="">February</a> (7)</li>
        <li><a href="">January 2007</a> (31)</li>
        <li><a href="">December 2006</a> (31)</li>
        <li><a href="">November 2006</a> (30)</li>
        <li><a href="">October 2006</a> (31)</li>
        <li><a href="">September 2006</a> (30)</li>
        <li><a href="">August 2006</a> (31)</li>
        <li><a href="">July 2006</a> (31)</li>
        <li><a href="">June 2006</a> (30)</li>
        <li><a href="">May 2006</a> (31)</li>
        <li><a href="">April 2006</a> (30)</li>
        <li><a href="">March 2006</a> (31)</li>
        <li><a href="">February 2006</a> (28)</li>
        <li><a href="">January 2006</a> (31)</li>
        <li><a href="">December 2005</a> (31)</li>
        <li><a href="">November 2005</a> (30)</li>
        <li><a href="">October 2005</a> (31)</li>
        <li><a href="">September 2005</a> (30)</li>
        <li><a href="">August 2005</a> (31)</li>
        <li><a href="">July 2005</a> (31)</li>
        <li><a href="">June 2005</a> (30)</li>
        <li><a href="">May 2005</a> (31)</li>
        <li><a href="">April 2005</a> (30)</li>
        <li><a href="">March 2005</a> (31)</li>
      </ul>
    </div>
  </div>
  <div id="search" class="boxed">
    <h2 class="heading">Search</h2>
    <div class="content">
      <form method="get" action="">
        <div>
          <input type="text" id="textfield1" name="textfield1" value="" size="18" />
          <input type="submit" id="submit1" name="submit1" value="Go" />
        </div>
      </form>
    </div>
  </div>
  <div id="categories" class="boxed">
    <h2 class="heading">Categories</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="">Quisque vestibulum</a></li>
        <li><a href="">Sed a nisl a lacus</a></li>
        <li><a href="">Quisque sagittis</a></li>
        <li><a href="">Etiam volutpat</a></li>
        <li><a href="">In aliquet hendrerit</a></li>
        <li><a href="">Suspendisse iaculis</a></li>
        <li><a href="">Nam vel risus at</a></li>
        <li><a href="">Praesent sit amet</a></li>
        <li><a href="">Quisque vestibulum</a></li>
        <li><a href="">In aliquet hendrerit</a></li>
        <li><a href="">Suspendisse iaculis</a></li>
        <li><a href="">Nam vel risus at</a></li>
        <li><a href="">Praesent sit amet</a></li>
        <li><a href="">Quisque vestibulum</a></li>
      </ul>
    </div>
  </div>
  <div id="blogroll" class="boxed">
    <h2 class="heading">Blogroll</h2>
    <div class="content">
      <ul>
        <li class="first"><a href="">AnotherFriendlySite.net</a></li>
        <li><a href="">CoolSite.com</a></li>
        <li><a href="">MyBestFriend.com</a></li>
      </ul>
    </div>
  </div>
</div>
<div id="footer">
  <p>Copyright &copy; 2006 Zion Narrows. Designed by <a href="http://www.freecsstemplates.org/"><strong>Free CSS Templates</strong></a></p>
</div>
</body>
</html>

Related examples in the same category

1.	'background' Example
2.	The background shorthand property provides for specifying all five separate background properties in one single property.
3.	background: mistyrose
4.	background: gray
5.	background: rgb(128, 128, 128)
6.	The background-color value can be transparent keyword, which is also the default value.
7.	The background-color value can be a hexadecimal value
8.	The background-color value can be a short hexadecimal value
9.	background: yellow;
10.	background: white url('http://java2s.com/style/logo.png') center center; (image and position)
11.	background: url('http://java2s.com/style/logo.png') repeat-x; (background-image-repeat)
12.	background: url('http://java2s.com/style/logo.png') repeat-y scroll; (background image repeat attachment)
13.	background: mistyrose;
14.	background: pink;
15.	background: lightyellow;
16.	background: rgb(234, 234, 234);
17.	background: yellowgreen;
18.	background: no-repeat fixed bottom center;
19.	background x tiled
20.	background y tiled
21.	Background fixed
22.	Whole page background
23.	Whole page shading effect
24.	HTML and CSS for background colors
25.	Using more than one background image
26.	Merge several image to one big background image
27.	CSS Background Attributes Example
28.	Link with background
29.	hr border: none; background-color: #256579; color: #256579; height: 2px; width: 80%;
30.	tfoot td background: #808080;color: white;
31.	background attachment: fixed
32.	option background-color: #3CB371;color: #ffffff;
33.	code padding:3px; background-color:black; color:#FFFFFF;
34.	background-attachment: fixed;
35.	demonstrating the background-color property
36.	Background grid
37.	a:hover {color:#FF9900; text-decoration:underline; background-color:#f9f0f0;}
38.	thead, tfoot {border:solid; background-color:#efefef; font-size:36px;}
39.	Update background image when mouse hover
40.	Using background image for DIV
41.	background: url(img/document.gif) no-repeat left center;
42.	Change background when mouse hover
43.	a:hover background: inherit;
44.	Round corner with background image
45.	Shading background
46.	Blue background
47.	Black background
48.	background: #ffffff url(1024px-images/background.gif) top center repeat-y;
49.	Round corner with background image 2
50.	Block quote with background
51.	background: rgb(244, 244, 244);
52.	The background shorthand property
53.	background assigns the padding area inside the box to a background color and/or image.
54.	Set URL for Background Image
55.	Background with no repeat
56.	Add background image to LI
57.	background: lightblue
58.	background: lightgreen
59.	background: pink
60.	Css Rollover with image

Using shade image to as the title bar background : background « CSS « HTML / CSS

Related examples in the same category