Using huge image as 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Free Css Templates by www.flash-templates-today.com</title>
<style type='text/css'>
* {
margin:0;
padding:0;
}
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background: #ffffff;
color: #000000;
}
a {
color:#d90000;
}
a:hover {
color:#000000;
}
h1, h2, h3 {
color:#d90000;
}
#container {
width: 1000px; /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
height:900px;
background: #ffffff url(049-images/siteBackground.jpg) left top no-repeat;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
text-align: left; /* this overrides the text-align: center on the body element. */
}
#header {
text-align:center;
margin-bottom:20px;
}
#header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0 0 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
font-size:48px;
}
#header span {
margin-left:450px;
}
#sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 282px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
}
#sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 282px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
}
#footer {
text-align:center;
}
#footer p {
padding:20px 0;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
#menu {
margin-top:20px;
background:url(049-images/menuBackground.jpg) left top no-repeat;
width:1000px;
height:75px;
}
#menu ul {
padding-top:20px;
}
#navlist li {
display: inline;
list-style-type: none;
padding-right: 60px;
}
#navlist li a {
font-size:24px;
color:#d90000;
text-decoration:none;
font-weight:bold;
}
#navlist li a:hover {
font-size:24px;
color:#d90000;
text-decoration:underline;
font-weight:bold;
}
/* --------------------------------------begin border----------------------------------*/
.body-panel {
background:#FFFFFF;
}
.top-left-corner-tabs, .top-right-corner-tabs, .bottom-left-corner-tabs, .bottom-right-corner-tabs {
background-image: url( 049-images/corners1280x18HomeTabsBody.gif );
height: 9px;
font-size: 2px;
}
.top-left-corner, .top-right-corner, .bottom-left-corner, .bottom-right-corner {
background-image: url( 049-images/corners1280x18.gif );
height: 9px;
font-size: 2px;
}
.top-left-corner, .bottom-left-corner, .top-left-corner-tabs, .bottom-left-corner-tabs {
margin-right: 9px;
}
.top-right-corner, .bottom-right-corner, .top-right-corner-tabs, .bottom-right-corner-tabs {
margin-left: 9px;
margin-top: -9px;
}
.top-right-corner, .top-right-corner-tabs {
background-position: 100% 0;
}
.bottom-left-corner, .bottom-left-corner-tabs {
background-position: 0 -9px;
}
.bottom-right-corner, .bottom-right-corner-tabs {
background-position: 100% -9px;
}
.inside {
border-left: 1px solid #C1C1C1;
border-right: 1px solid #C1C1C1;
padding: 0px 10px 0px 10px;
height: 100%;
}
.inside p {
padding: 0.2em 0 1em;
}
.tabsInside {
border-left: 1px solid #C1C1C1;
border-right: 1px solid #C1C1C1;
padding: 0px 10px 0px 10px;
height:150px;
}
/* --------------------------------------end border----------------------------------*/
</style>
<!--[if IE 5]>
<style type="text/css">
/* place css box model fixes for IE 5* in this conditional comment */
#sidebar1 { width: 180px; }
#sidebar2 { width: 190px; }
</style>
<![endif]--><!--[if IE]>
<style type="text/css">
/* place css fixes for all versions of IE in this conditional comment */
#mainContent { zoom: 1; }
/* the above proprietary zoom property gives IE the hasLayout it needs to avoid several bugs */
</style>
<![endif]-->
</head>
<body>
<!-- begin #container -->
<div id="container">
<!-- begin #header -->
<div id="header">
<h1>Personal Photo Gallery</h1>
<span>by <a href="http://www.flash-templates-today.com">www.flash-templates-today.com</a></span>
<div id="menu">
<ul id="navlist">
<li id="active"><a href="#" id="current">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</div>
</div>
<!-- end #header -->
<!-- begin #sidebar1 -->
<div id="sidebar1">
<div class="body-panel">
<div class="top-left-corner"></div>
<div class="top-right-corner"></div>
<div class="inside">
<h3>All website template is released under a Creative Commons Attribution 2.5 License</h3>
<p>
We request you retain the full copyright notice below including the link to www.flash-templates-today.com.
This not only gives respect to the large amount of time given freely by the developers but also helps build interest,
traffic and use of our free and paid designs. If you cannot (for good reason) retain the full copyright
we request you at least leave in place the Website Templates line, with Website Templates linked to www.flash-templates-today.com.
If you refuse to include even this then support may be affected.<br /><br />
<b>You are allowed to use this design only if you agree to the following conditions:</b><br />
- You can not remove copyright notice from any our template without our permission.<br />
- If you modify any our template it still should contain copyright because it is based on our work.<br />
- You may copy, distribute, modify, etc. any our template as long as link to our website remains untouched.<br /><br />
For support please visit <a href="http://www.flash-templates-today.com/contact.php">http://www.flash-templates-today.com/contact.php</a>
</p>
<br /><br />
<h3>Testimonials</h3>
<p>
When developing flash site I had a problem with action script. I contacted Flash-Templates-Today.com and they answered all my questions pretty fast. They also gave me a couple of their flash template for free to help me make out how to make them. Thank you very much! I am able to make flash sites now because of you! Michigan State University.<br />
Author: <b>Mark Janz</b>
</p>
</div>
<div class="bottom-left-corner"></div>
<div class="bottom-right-corner"></div>
</div>
</div>
<!-- end #sidebar1 -->
<!-- begin #sidebar2 -->
<div id="sidebar2">
<div class="body-panel">
<div class="top-left-corner"></div>
<div class="top-right-corner"></div>
<div class="inside">
<h3>What does Flash Template mean?</h3>
<p>
Flash Template is a ready-made Flash Site that you can download and use for free! <strong>Flash Template</strong> was created by professional and independent designers for you. You need only to make your adjustments and your flash site is ready. If you open .fla file you can easily change the text information and graphics of the site. There's no need to make animation - our designers already did it. After your text and graphics adjustments you need only to upload .swf file to your server and enjoy your ready Flash Site! Using <a href="http://www.flash-templates-today.com">Free Flash Templates</a> you can save your time and money!
</p>
<br /><br />
<h3>Your Flash Site will be look professional!</h3>
<p>
An extensive number of unique Flash Templates is at your service. All templates on our site were created specially for you! Our <strong>independent designers</strong> created flash professional templates. Also our templates are unique. It means you can use our <strong>flash templates</strong> to create your own site!
</p>
<br /><br />
<h3>Advantages of free website templates:</h3>
<p>
<em>Speed</em> - you can create your own site in a very short time by downloading the design you like in a few minutes;<br />
<em>Money saving</em> - you don't have to spend any money because our unique templates are really for free;<br />
<em>Quality</em> - all our templates are valid and competently constructed;<br />
<em>Pleasure</em> - you will completely enjoy creating your own site.
</p>
</div>
<div class="bottom-left-corner"></div>
<div class="bottom-right-corner"></div>
</div>
</div>
<!-- end #sidebar2 -->
<!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
<!-- begin #footer -->
<div id="footer">
<p>
<a href="http://flash-templates-today.com/terms-of-use.php">Terms of Use</a> |
<a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Strict"><abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a> |
<a href="http://jigsaw.w3.org/css-validator/check/referer" title="This page validates as CSS"><abbr title="Cascading Style Sheets">CSS</abbr></a><br />
Copyright 2009. Design by <a href="http://www.flash-templates-today.com" title="Free Flash Templates">Free Flash Templates</a>
</p>
</div>
<!-- end #footer -->
</div>
<!-- end #container -->
</body>
</html>
Related examples in the same category