background: #ffffff url(1024px-images/background.gif) top center repeat-y; : background « CSS « HTML / CSS






background: #ffffff url(1024px-images/background.gif) top center repeat-y;

   
<!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>
<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 / Design by Andreas Viklund - http://andreasviklund.com/" />

<style type="text/css">
/* 1024px - An open source xhtml/css website template by Andreas Viklund - http://andreasviklund.com . Free to use in any way and for any purpose as long as the proper credits are given to the original designer.

Version: 1.0, March 29, 2006 */
/******** General tags ********/
body {
  font: 76% Verdana, Tahoma, Arial, sans-serif;
  background: #ffffff url(1024px-images/background.gif) top center repeat-y;
  color: #404040;
  line-height: 1.2em;
  margin: 0 auto;
  padding: 0;
}

a {
  text-decoration: none;
  color: #4088b8;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

a img {
  border: 0;
}

p {
  margin: 0 0 18px 10px;
}

ul,ol,dl {
  font-size: 0.9em;
  margin: 2px 0 16px 35px;
}

ul ul,ol ol {
  margin: 4px 0 4px 35px;
}

h1 {
  font-size: 4.2em;
  letter-spacing: -8px;
  margin: 0 0 30px 25px;
  color: #4088b8;
}

h1 a {
  text-transform: none;
  color: #4088b8;
}

h2 {
  font-size: 1.4em;
  color: #4088b8;
  border-bottom: 4px solid #dadada;
  padding: 0 2px 2px 5px;
  margin: 0 0 10px 0;
  letter-spacing: -1px;
}

h3 {
  font-size: 1.2em;
  font-weight: bold;
  color: #4088b8;
  border-bottom: 1px solid #dadada;
  margin: 10px 0 8px 0;
  padding: 1px 2px 2px 3px;
}

blockquote {
  font-size: 0.9em;
  border: 1px solid #dadada;
  margin: 20px 10px;
  padding: 8px;
}

/******** Main wrap ********/
#wrap {
  color: #404040;
  width: 970px;
  margin: 10px auto;
  padding: 0;
}

#header {
  margin: 0;
}

#toplinks {
  text-align: right;
  padding: 5px 2px 2px 3px;
}

#slogan {
  font-size: 1.5em;
  color: #808080;
  font-weight: bold;
  letter-spacing: -1px;
  margin: 15px 0px 20px 35px;
  line-height: 1.2em;
}

/******** sidebar ********/
#sidebar {
  float: left;
  width: 195px;
  margin: 0 0 5px 0;
  padding: 1px 0 0 0;
}

#sidebar ul {
  list-style: none;
  font-size: 0.9em;
  margin: 0;
  padding: 0 0 15px 10px;
}

#sidebar li {
  list-style: none;
  margin: 0 0 4px 0;
  padding: 0;
}

#sidebar li a {
  font-size: 1.2em;
  font-weight: bold;
  padding: 2px;
}

#sidebar ul ul {
  margin: 4px 0 3px 15px;
  line-height: 1.2em;
  padding: 0;
}

#sidebar ul ul li a {
  font-weight: normal;
}

#sidebar h2 {
  margin: 3px 0px 8px 0px;
}

/******** Content variations ********/
#content {
  line-height: 1.5em;
  width: 750px;
  float: right;
  text-align: left;
  margin: 0;
  padding: 0;
}

#contentalt {
  line-height: 1.5em;
  width: 750px;
  float: left;
  text-align: left;
  padding: 0;
  margin-right: 20px;
}

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

/******** Footer ********/
#footer {
  clear: both;
  text-align: right;
  color: #808080;
  font-size: 0.9em;
  border-top: 4px solid #dadada;
  margin: 0 auto;
  padding: 8px 0;
  line-height: 1.6em;
}

#footer p {
  margin: 0;
  padding: 0;
}

#footer a {
  color: #808080;
}

/******** Various classes ********/
.box {
  color: #ffffff;
  font-size: 0.9em;
  background-color: #4088b8;
  border: 1px solid #c8c8c8;
  line-height: 1.3em;
  padding: 5px 5px 5px 8px;
}

.box a {
  color: #f0f0f0;
}

.left {
  float: left;
  margin: 0 15px 4px 0;
}

.right {
  float: right;
  margin: 0 0 4px 15px;
}

.textright {
  text-align: right;
}

.readmore {
  text-align: right;
  margin: -10px 10px 12px 0;
}

.center {
  text-align: center;
}

.blue {
  color: #4088b8;
}

.big {
  font-size: 1.3em;
}

.small {
  font-size: 0.8em;
}

.bold {
  font-weight: bold;
}

.clear {
  clear: both;
}

.hide {
  display: none;
}

.fade {
  color: #c8c8c8;
}

.gray {
  color: #808080;
}

.photo {
  border: 1px solid #bababa;
  padding: 2px;
  background-color: #ffffff;
  margin: 6px 18px 2px 5px;
}
</style>
<title>1024px by Andreas Viklund</title>
</head>

<body>
<div id="wrap">

<div id="header">
<p id="toplinks">Skip to: <a href="#content">Content</a> | <a href="#sidebar">Navigation</a> | <a href="#footer">Footer</a></p>
<h1><a href="index.html">1024<span class="fade">px</span></a></h1>
<p id="slogan">when 800px just isn't enough...</p>
</div>

<div id="contentalt">
<h2>As simple as it gets...</h2>
<p><img src="images/example.jpg" width="280" height="144" alt="Example frontpage image" class="left photo" />Welcome to <strong><span class="blue">1024</span><span class="gray">px</span></strong>, a free website template by <a href="http://andreasviklund.com/">Andreas Viklund</a>. This is a regular XHTML/CSS template which you can use to build your own website. This template is released as open source web design, which means that you are free to use it for any purpose and in any way you may want to without any obligations or limitations. I kindly ask that you leave the credit text and link (the one that says "Design by Andreas Viklund" in the footer) since that would be a nice way of supporting my work. But the decision is yours, and that freedom is the beauty with open source design...</p>

<h2>Blog/CMS theme versions</h2>
<p>Are you looking for a WordPress theme version of this template? Or maybe a version that is ported for Textpattern, Etomite, MODx, Blogger or some other <a href="http://solucija.com/">great content management system</a> or blog engine? Then check out my <a href="http://andreasviklund.com/templates/themes">ports and themes page</a> to see if there are any version available that you can use. If you make a port yourself, please let me know so I can your version to the list.</p>
<p class="readmore"><a href="styles.html">Example "Read more" link</a> &raquo;</p>
<p class="box"><strong>Note:</strong> This template is not intended to be advanced or cool in any way. It was based on feedback and requests that I have got from people who use my other templates. I was asked to make a really simple design that was wider than my regular 800px templates, and so I did. Accessibility, good code quality, search engine friendliness and low file size are important features too.</p>
</div>

<div id="sidebar">
<h2>Welcome!</h2>
<p>Write a short presentation of yourself or the site right here. This template comes in two variations. <a href="index.html">Switch to layout #1</a>!</p>

<h2>Pages:</h2>
<ul>
<li><a href="#">Front page</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Downloads</a>
<ul>
<li><a href="#">Music</a></li>
<li><a href="#">Pictures</a></li>
</ul></li>
<li><a href="#">Link archive</a></li>
<li><a class="hide" href="#header">Back to top</a></li>
</ul>

<h2>Site news:</h2>
<p><strong>March 29, 2006</strong><br />
New template designed: 1024px v1.0!</p>

<h2>Links:</h2>
<ul class="links">
<li><a href="http://andreasviklund.com/templates/">Free templates</a></li>
<li><a href="http://andreasviklund.com/wordpress-themes/">WordPress themes</a></li>
<li><a href="http://jokkmokk.biz/">Made in Jokkmokk</a></li>
<li><a href="http://openwebdesign.org">Open Webdesign</a></li>
<li><a href="http://oswd.org">OSWD.org</a></li>
</ul>
</div>

<div id="footer">
<p><a href="#">Contact us</a> | <a href="#">Privacy policy</a> | <a href="#">Sitemap</a> | <a href="#">RSS</a> | <a href="#header">Back to top</a><br />
&copy; 2006 Your Name | Design by <a href="http://andreasviklund.com/">Andreas Viklund</a>,
<a href="http://www.ehostinfo.com/">Web Hosting</a>
</p>
</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 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.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