Whole page background : background « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. background

Whole page background

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>andreas06: falling leaves</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="your description goes here" />
<meta name="keywords" content="your,keywords,goes,here" />
<meta name="author" content="Your Name / Original design: Andreas Viklund - http://andreasviklund.com/" />
<style type='text/css'>
/* andreas06 - an open source xhtml/css website layout by Andreas Viklund - http://andreasviklund.com . Free to use for any purpose as long as the proper credits are given for the original design work.

Version: 1.1, November 28, 2005 */

body{
background:#e0e0e0 url(andreas06-img/bodybg.gif) repeat-x;
color:#505050;
font:76% Georgia,Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}

p{
line-height:1.5em;
margin:0 0 15px;
}

a{
color:#fa9035;
font-weight:700;
text-decoration:none;
}

a:hover{
color:#d04a10;
}

hr{
height:1px;
margin:10px 0;
width:98%;
}

dt{
font-weight:700;
}

dd{
margin:1px 0 12px 15px;
}

#container{
background:#c0c0c0 url(andreas06-img/bodybg.gif) repeat-x;
margin:0 auto;
text-align:left;
width:752px;
}

#sitename{
background:url(andreas06-img/leaves.jpg) top center no-repeat;
color:#ffffff;
font-weight:400;
height:80px;
margin:0 20px 10px 0;
text-align:center;
}

#sitename h1{
font-size:2.2em;
margin:0;
padding-top:20px;
}

#sitename span{
font-size:1.6em;
letter-spacing:-1px;
margin:0;
}

#nav{
background:url(andreas06-img/greypx.gif) bottom left repeat-x;
float:left;
width:752px;
}

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

#nav a{
background:url(andreas06-img/tabs.gif) no-repeat 100% 0;
color:#808080;
display:block;
font-size:1.2em;
letter-spacing:-1px;
padding:7px 20px 4px 11px;
text-decoration:none;
}

#nav a:hover{
color:#505050;
}

#nav li{
background:url(andreas06-img/tabs.gif) no-repeat 0 0;
float:left;
margin:0 4px 0 0;
padding:0 0 0 9px;
}

#nav #current{
background:url(andreas06-img/tabs.gif) no-repeat 0 -41px;
}

#nav #current a{
background:url(andreas06-img/tabs.gif) no-repeat 100% -41px;
color:#303030;
padding:7px 20px 5px 11px;
}

#wrap1{
background:#ffffff url(andreas06-img/innerbg.gif) repeat-y;
border-bottom:1px solid #808080;
border-left:1px solid #808080;
border-right:1px solid #808080;
clear:both;
padding:0;
width:750px;
}

#wrap2{
background:url(andreas06-img/header.jpg) top left no-repeat;
padding:10px;
width:730px;
}

#header{
height:30px;
position:relative;
width:730px;
}

#header h1{
float:left;
font-size:1.4em;
margin:0;
width:180px;
}

#topbox{
color:#808080;
margin:0 0 4px;
text-align:right;
}

#topbox a{
color:#d04a10;
}

#topbox a:hover{
text-decoration:underline;
}

#leftside{
float:left;
margin:-15px 0 0;
width:145px;
}

#leftside h1{
font-size:1.4em;
font-weight:400;
}

#rightside{
float:right;
margin:40px 15px 20px 0;
width:130px;
}

#rightside h1{
font-size:1.4em;
font-weight:400;
margin:0 0 12px;
}

#rightside p{
font-size:0.9em;
margin:2px 0 12px 10px;
}

#rightside img{
border:1px solid #fa9035;
margin:10px 0 5px 5px;
padding:2px;
}

#content{
margin:45px 160px 0 180px;
}

#contentalt{
margin:45px 15px 0 180px;
}

#content p,#contentalt p{
margin:8px 0 0 10px;
}

#content h1,#contentalt h1{
color:#505050;
font-size:2em;
font-weight:400;
margin:15px 0 10px;
padding:0;
}

#content h2,#contentalt h2{
color:#505050;
font-size:1.5em;
font-weight:400;
margin:20px 0 10px;
padding:0;
}

#content img,#contentalt img{
border:1px solid #fa9035;
float:left;
margin:5px 15px 6px;
}

#footer{
clear:both;
color:#a0a0a0;
font-size:0.9em;
height:26px;
margin-top:20px;
padding:1px;
text-align:right;
width:730px;
}

#footer a{
color:#a0a0a0;
font-weight:400;
}

#footer a:hover{
color:#a0a0a0;
text-decoration:underline;
}

.menublock{
margin-bottom:10px;
}

.nav{
color:#d04a10;
display:block;
font-size:1.1em;
font-weight:700;
margin-bottom:1px;
padding:2px 2px 2px 10px;
position:relative;
text-decoration:none;
width:125px;
}

.nav:hover{
border:1px solid #fa9035;
color:#505050;
padding:1px 1px 1px 9px;
}

.sub{
font-size:0.9em;
margin-left:20px;
padding:1px 1px 1px 6px;
width:105px;
}

.sub:hover{
border:1px solid #fa9035;
color:#505050;
padding:0 0 0 5px;
}

.intro{
font-weight:700;
}

.active{
border:1px solid #fa9035;
padding:1px 1px 1px 9px;
}

.box{
background:#f8f8f8 url(andreas06-img/boxbg.gif) top left repeat-y;
border:1px solid #d0d4d4;
color:#505050;
margin:15px auto;
padding:10px 10px 10px 20px;
width:75%;
}

.photo{
margin:5px auto 15px;
padding:5px;
}

.smallcaps{
font-variant:small-caps;
}

.mini{
color:#a0a0a0;
font-size:0.75em;
font-weight:400;
line-height:1.2em;
margin:20px 0 10px 8px;
}

.small{
font-size:0.85em;
}

.large{
font-size:1.4em;
}

.soft{
color:#808080;
}

.normal{
font-weight:400;
}

.sharp{
color:#101010;
}

.center{
text-align:center;
}

.hide{
display:none;
}
</style>


</head>

<body>
<div id="container">
<a id="top"></a><p class="hide">Skip to: <a href="#menu">site menu</a> | <a href="#sectionmenu">section menu</a> | <a href="#main">main content</a></p>

<div id="sitename">
<h1>andreas06: falling leaves</h1>
<span>It is all about colors...</span>
<a id="menu"></a>
</div>

<div id="nav">
<ul>
<li id="current"><a href="index.html">Front page</a></li>
<li ><a href="alternative.html">Alternative layout</a></li>
<li><a href="photo.html">Photo layout</a></li>
<li><a href="styles.html">Styles</a></li>
<li><a href="empty.html">Empty</a></li>

</ul>
<p class="hide"><a href="#top">Back to top</a></p>
</div>
 
<div id="wrap1">
<div id="wrap2">

<div id="topbox">
<strong><span class="hide">Currently viewing: </span><a href="index.html">andreas06: Falling leaves</a> &raquo; <a href="index.html">Front page</a></strong>
</div>

<div id="leftside">
<a id="sectionmenu"></a>
<p class="soft">Use the navigation tabs to read more about the template and to see alternative layouts and features.</p>
<h1>Example menu:</h1>
<p class="menublock">
<a class="nav" href="#">Downloads</a><br class="hide" />
<a class="nav sub" href="#">- MP3 files</a><br class="hide" />
<a class="nav sub" href="#">- MIDI tools</a><br class="hide" />
<a class="nav sub" href="#">- PDF Manuals</a><br class="hide" />
<a class="nav" href="#">Forum</a><br class="hide" />
<a class="nav sub" href="#">- Latest news</a><br class="hide" />
<a class="nav sub" href="#">- Members</a><br class="hide" />
<a class="nav sub" href="#">- Newsletter</a><br class="hide" />
<a class="nav" href="#">Login</a><br class="hide" />
<a class="nav" href="#">Merchandise</a><br class="hide" />
<a class="hide" href="#top">Back to top</a>
</p>
</div>

<div id="rightside">
<h1>Template info:</h1>
<p>andreas06 is built with valid XHTML 1.1 and CSS2. It conforms to section 508 and a WCAG 1.0 AAA rating. It has full support for browser-based font-resizing, 100% readable also even in text-based browsers.</p>
<p>/<strong>Andreas</strong></p>

<h1>Links:</h1>
<p>
<a href="http://andreasviklund.com">My website</a><br />
<a href="http://andreasviklund.com/templates">Free templates</a><br />
<a href="http://baygroove.com">Baygroove.com</a><br />
<a href="http://openwebdesign.org">Open Web Design</a><br />
<a href="http://oswd.org">OSWD.org</a><br />
<a href="http://www.solucija.com">sNews CMS</a><br />
</p>
<p class="smallcaps">andreas06 v1.2<br />
(Nov 28, 2005)</p>
</div>

<a id="main"></a>
<div id="content">
<h1>Welcome to "falling leaves"...</h1>
<img src="img/gravatar-leaf.jpg" height="80" width="80" alt="Gravatar example" />
<p class="intro">...also known as "andreas06", yet another open source template by Andreas. This one has a lot of useful features, such as the two-level menu and a good set of formatting and layout styles!</p>
<p>Like in my other templates, the extra features are all built into the stylesheet. The simple structure of the code (all content is separated from the presentation) makes it easy to customize the look and feel of the design, and you get several layouts to choose from in the download zip. Click the menu tabs to view the examples.</p>
<p>The design is inspired by the colors of the fall, since the template was created as an entry in the <a href="http://openwebdesign.org">Open Web Design</a> "fall/autumn" competition in October 2005 (where it as awarded 1st place). The colors are picked from a photo of the local park, taken on Oct 1st.</p>
<h2>Open source design</h2>
<p>This template is released as open source, which means that you are free to use it in any way you may want to. If you like this design, you can download my other designs directly from <a href="http://andreasviklund.com">my website</a> (where you can also find a WordPress version of this theme) or from Open Web Design. Comments, questions and suggestions are always very welcome!</p>
<p class="hide"><a href="#top">Back to top</a></p>
</div>
</div>

<div id="footer">&copy; 2005 Your Name | Design by <a href="http://andreasviklund.com">Andreas Viklund</a> 
  | <a href="http://www.cssportal.com/">CSS Portal</a></div>
</div></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 shading effect
23.HTML and CSS for background colors
24.Using more than one background image
25.Merge several image to one big background image
26.CSS Background Attributes Example
27.Link with background
28.hr border: none; background-color: #256579; color: #256579; height: 2px; width: 80%;
29.tfoot td background: #808080;color: white;
30.background attachment: fixed
31.option background-color: #3CB371;color: #ffffff;
32.code padding:3px; background-color:black; color:#FFFFFF;
33.background-attachment: fixed;
34.demonstrating the background-color property
35.Background grid
36.a:hover {color:#FF9900; text-decoration:underline; background-color:#f9f0f0;}
37.thead, tfoot {border:solid; background-color:#efefef; font-size:36px;}
38.Update background image when mouse hover
39.Using background image for DIV
40.background: url(img/document.gif) no-repeat left center;
41.Change background when mouse hover
42.a:hover background: inherit;
43.Using shade image to as the title bar background
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