Round corner with background image 2 : background « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. background

Round corner with background image 2

   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content=
    "text/html; charset=us-ascii" />
    <meta name="Robots" content="index,follow" />
    <meta name="author" content="Aaron Ganschow, aaron@unkommon.com" />
    <title>
      Antique_Modern
    </title>

<style type="text/css">
body
{
  background: #e4e4e4 url(Antique-Modern-images//background.gif) repeat-x top left;
  margin: 0px; 
  padding: 0px;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 12px;
}

#head
{
  background: #e4e4e4 url(Antique-Modern-images//head_empty.gif) no-repeat top left;
  width: 747px;
  height: 117px;
  padding: 0px;
  margin: 0 auto;
}

#head #title
{
  float: left;
   font-size: 30px;
  color: #F0EBE7;
  padding: 35px 0px 0px 30px;

}

#body_wrapper
{
  background: url(Antique-Modern-images//body_cont.jpg) repeat-y top left;
  margin: 0px auto;
  width: 747px;
  display: block;
}


#body
{
  background: url(Antique-Modern-images//body_top.jpg) no-repeat top left;
  float: left;
  padding: 10px 20px 0px 20px;
  min-height: 343px;
  display: block;
}

#end_body
{
  background: url(Antique-Modern-images//footer.jpg) no-repeat top left;
  margin: 0px auto;
  width: 747px;
  height: 37px;
  display: block;
}

.clearer
{
  clear: both;
  height: 1px;
}

#all
{
  width: 707px;
  float: left;
  padding: 0px;
  background: url(Antique-Modern-images//all_middle.gif) repeat-y top left;
}

#all .top
{
  background: url(Antique-Modern-images//all_top.gif) no-repeat top left;
  width: 707px;
  height: 18px;
  padding: 0px;
  margin: 0px;
}

#all .bottom
{
  background: url(Antique-Modern-images//all_bottom.gif) no-repeat bottom left;
  width: 707px;
  height: 21px;
  padding: 0px;
  margin: 0px;
}

#left
{
  width: 538px;
  float: left;
  padding: 0px;
  margin: 0px;
  background: url(Antique-Modern-images//left_middle.gif) repeat-y top left;
}

#left .top
{
  background: url(Antique-Modern-images//left_top.gif) no-repeat top left;
  width: 538px;
  height: 18px;
  padding: 0px;
  margin: 0px;
}

#left .bottom
{
  background: url(Antique-Modern-images//left_bottom.gif) no-repeat bottom left;
  width: 538px;
  height: 21px;
  padding: 0px;
  margin: 0px;
}

#right
{
  width: 169px;
  float: right;
  padding: 0px;
  margin: 0px;
  background: url(Antique-Modern-images//right_middle.gif) repeat-y top left;
}

#right .top
{
  background: url(Antique-Modern-images//right_top.gif) no-repeat top left;
  padding: 0px;
  margin: 0px;
  width: 169px;
  height: 18px;
}

#right .bottom
{
  background: url(Antique-Modern-images//right_bottom.gif) no-repeat bottom left;
  padding: 0px;
  margin: 0px;
  width: 169px;
  height: 21px;
}

.content 
{
  padding: 0px 15px;
}

#footer
{
  margin: 0 auto; 
  width: 747px;
  text-align: center;
  color: #B05128;
  font-weight: bold;
}

#footer a
{
 color: #B05128;
}

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

#right ul li 
{
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: block;
}

#right ul a 
{
  display: block;
  width: 125px;
  background: #c7b8a4;
  color: #000;
  padding: 3px;
  padding-left: 10px;
  text-decoration: none;
  margin: 0px;
  border: 0px;
}

#right ul a:hover 
{
  color: #FFFFFF;
  background: #822C0F;
}

/* Navigation */

#menu 
{
  float: right;
  margin: 80px 20px 0px 0px;
}

#menu ul 
{
  margin: 0;
  padding: 0;
  white-space : nowrap;
}

#menu ul li 
{
  margin: 0;
  padding: 0;
  display: block;
  float:left;
  text-align: center;
}

#menu ul li a 
{
  color : #fff;
  background-color: transparent;
  text-decoration : none;
  font-weight: bold;
  display: block;
  border-style:none;
}

#menu ul li a:link, #menu ul li a:visited 
{
  background-image: url(Antique-Modern-images//menu_item2.gif);
  background-repeat: no-repeat;
  height: 26px;
  width: 94px;
  line-height: 26px;
  padding-top: 7px;
}

#menu ul li a:hover, #menu ul li a:active 
{
  background-image: url(Antique-Modern-images//menu_item2.gif);
  background-repeat: no-repeat;
  background-position: 0px -33px;
  height: 29px;
  width: 94px;
  line-height: 29px;
  padding-top: 4px;
}

#menu ul li.active a:hover, #menu ul li.active a:active, #menu ul li.active a:link, #menu ul li.active a:visited 
{
  background-image: url(Antique-Modern-images//menu_item2.gif);
  background-repeat: no-repeat;
  background-position: 0px -66px;
  height: 29px;
  width: 94px;
  line-height: 29px;
  padding-top: 4px;
  color: #B05128;
}


/*  Headers  */
h1 
{
  padding: 0px;
  margin: 0px;
  margin-bottom: 5px;
  color: #D96B11;
  background-color: transparent;
  font-size: 1.6em;
  font-weight: bold;
}

h2 
{
  padding: 0px;
  margin: 0px;
  margin-bottom: 5px;
  color: #333;
  background-color: transparent;
  font-size: 1.5em;
  font-weight: bold;
}

h3 
{
  padding: 0px;
  margin: 0px;
  margin-bottom: 5px;
  color: #76b7d7;
  background-color: transparent;
  font-size: 1.4em;
  font-weight: bold;
}

h4 
{
  padding: 0px;
  margin: 0px;
  margin-bottom: 5px;
  color: #333;
  background-color: transparent;
  font-size: 1.3em;
  font-weight: bold;
}

h5 
{
  color: #9ad5f3;
  background-color: transparent;
  padding: 0px;
  font-size: 1.2em;
  font-weight: bold;
  margin: 0px;
  padding: 0px;
  margin-bottom: 5px;
}

h6 
{
  padding: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 5px;
  margin-left: 0px;
  color: #D96B11;
  font-size: 1.1em;
  font-weight: normal;
  line-height: 150%;
}

/* HTML Tags */

code
{
  display: block;
  margin: 5px;
  padding: 5px;
  color: #ad4c21;
  border: 1px dashed;
  background: #f0ebe7;
  font-family: Courier, 'Courier New', 'Andale Mono', Monaco, monospace;

}

a
{
  color: #AD4C21;
  text-decoration: none;
  border-bottom: 1px dashed;
  padding-bottom: 0px;
}

a:hover
{
  color: #000;
}

hr
{
  border: 0px;
  border-bottom: 1px #F0EBE7 dashed;
  height: 1px;
}

#left hr, #all hr
{
  margin: 10px 0px;
}

form
{
  margin: 0px;
  padding: 0px;
}

form .item
{
  clear: left;
  border-top: 1px solid #EEE;
  margin: 3px;
}

form .label
{
  float: left;
  clear: left;
  width: 150px;
}

input, textarea, select
{
  color: #AD4C21;
  border: 1px solid;
  background: #F0EBE7;
  margin: 3px;
  padding: 2px;
}

blockquote {
  margin: 5px;
  background: transparent url(Antique-Modern-images//quotes.gif) left top no-repeat;
  padding-left: 37px;
}

blockquote[cite]:after {
  content: "Quote from: " attr(cite);
  display: block;
  border-top: 1px solid #999;
  color: #999;
  margin: 1em 0 0;
  padding: .5em 0 0;
  font-size: .8em;
  font-weight: bold;
}

del 
{
  color: #800;
  text-decoration: line-through;
}

dt
{
  font-weight: bold;
  font-size: 1.05em;
  color: #ad4c21;
}

dd 
{
  margin-left: 15px;
}

/* adds a space and then a graphic after any external (i.e. off-site) links */
a[target]:after{
  content: " " url(Antique-Modern-images//externalpage.gif);
}
</style>
  </head>
  <body>
    <div id="head">
      <div id="title">
           Antique Modern
      </div>
      <div id="menu">
        <ul>
          <li class="active">
            <a href="#" title="Resume">Index</a>
          </li>
          <li>
            <a href="1col.html" title="One Column">1 Column</a>
          </li>
          <li>
            <a href="tags.html" title="Tags">Tags</a>
          </li>
          <li>
            <a href="#" title="Blank">Blank</a>
          </li>
        </ul>
      </div>
    </div>
    <div id="body_wrapper">
      <div id="body">
        <div id="left">
          <div class="top"></div>
          <div class="content">
            <h1>News</h1>
            <h2>March 10, 2006</h2>
            <p>
              I have fixed a few lingering problems in the CSS of the design.  The 
              css now validates due to the removal of an unnecessary expression() in 
              the height of #body, as well as fixing an issue that would make 
              the tabs on top change their location depending on user fonts.  So
              hopefully this will be the last bugfix/update!
            </p>
            <h2>March 9, 2006</h2>
            <p>
              I extended the modified tags on the <a href="tags.html">tags</a>
              page.  Enjoy the vast amount of customization for this template!
            </p>
            <h2>March 8, 2006</h2>
            <p>
               The new design seems to be up and running.  I have been pondering
               what to name this template while putting it up as an Open Source
               design.  Well, I couldn't think of anything creative, so I went
               with Antique_Modern.  There is a 2 column layout (which you see
               here) and a <a href="1col.html">1 column layout</a> for alternate pages.  Take a look
               <a href="tags.html">around</a>, and enjoy!
            </p>
            <h2>March 7, 2006</h2>
            <p>
               Decided to stop mooching on other people's designs and started
               making my own.  I took some concepts of design from <a href="http://www.oswd.org/design/preview/id/2740" target="_blank">Nautica02</a>
               (the dropshadow/background idea) which was too wide for a
               standard 800x600, and also the tabs come from many influence,
               though is reasonably attributed to the <a href="http://www.mozilla.org/" target="_blank">Mozilla Foundation</a> where
               the tabCSS/position trick was popularized.
            </p>
          </div>
          <div class="bottom"></div>
        </div>
        <div id="right">
          <div class="top"></div>
          <div class="content">
            <h4>Submenu</h4>
            <ul>
              <li><a href="#">SubItem 1</a></li>
              <li><a href="#">SubItem 2</a></li>
              <li><a href="#">SubItem 3</a></li>
              <li><a href="#">SubItem 4</a></li>
            </ul>
            <hr />
            <h4>Quote</h4>
            There's no 'I' in team.<br />
            There's no 'U' in team either.<br />
            If I'm not on the team, and you're not on the team: nobody is on the
            team and the team sucks!<br />
            <hr />
            <h4>Links</h4>
            <ul>
              <li><a href="http://aaron.ganschow.us/" target="_blank">Aaron Ganschow</a></li>
              <li><a href="http://www.wildleaf.net/" target="_blank">Wildleaf</a></li>
              <li><a href="http://www.mozilla.org/" target="_blank">Mozilla</a></li>
            </ul>
          </div>
          <div class="bottom"></div>
        </div>
        <div class="clearer"></div>
      </div>
      <div class="clearer"></div>
    </div>
    <div id="end_body"></div>
    <div id="footer">
      &copy; Copyright <a href="mailto:youremail@server.com">Your
      Name</a> 2006
      | <a href="http://www.ehostinfo.com/">Web Hosting</a></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.Using shade image to as the title bar background
45.Round corner with background image
46.Shading background
47.Blue background
48.Black background
49.background: #ffffff url(1024px-images/background.gif) top center repeat-y;
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