|
how can I tile 2 background images one on top of another?
Hi, Im new to web design and I am running into some problems on version 2.0 of my first site. Im really a noob at html/ css and I basically compiled this web page from several free templates I found online.
My first issue is that I currently have a 16x16 tiled background. On top of this, and behind everything else, I want to repeat-y another background image that is ~1000px wide. Then I want to end it with a footer image so that it rounds off before the bottom of the page. So basically on high resolution screens there will be a border on both sides of my web page that is defined by my current background.. Sorry, if thats worded funny. 
The next issue is a FIREFOX specific problem... or atleast it displays fine in IE 6. If you look at my web page you'll see code for h1 header tags that enclose the text oneupgamers.com. I had to put this in there because without it my "middle" div column starts at the top of the screen and behind my header/navbar. I know that my current fix is a REALLY ugly fix  and I want to know how to do it right. I geuss I should add that I do not wany any text there. Right now I have the font size at like 3 and the color black so you wont see it, but it displays right above the first post. Ideally I do not want any text there at all.
My page is located at oneupgamers.com and the css is at oneupgamers.com/style. css.
html
- Code: Select all
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<link href="style.css" rel="stylesheet" type="text/css" >
<meta name="keywords" content="one up, retro gaming, video gaming, gamer forum, gaming forum, world of warcraft, Super nintendo, SNES, NES, DS, PSP, RPG, Sega, Nintendo, Wii, mario, luigi, Playstation, Xbox, Halo, Call of Duty, Everquest, Starcraft, Best 25 SNES Games" >
<meta name="description" content="A site where video gamers can find articles, information and up to date news of all things related to gaming. There is also a forum community where gamers can discuss all aspects of gaming with other gamers." >
<LINK REL="SHORTCUT ICON" HREF="favicon.ico">
<title>oneupgamers.com - Main - Your one stop site for all things gaming. From retro gaming to next generation its all here.</title>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
a:visited {
color: #ff4500;
}
a:hover {
color: #00FF00;
}
a:link {
color: #ff6600;
}
a:active {
color: #FF9900;
}
.style1 {
font-size: 3px;
color: #000000;
}
</style></head>
<body>
<div id="wrap">
<div class="container">
<div id="pageHeader">
<!-- ------------------------------------------navbar------------------------------------------------------- -->
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Home</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<div id="left">
<div class="menu">
<div class="menuheader">
<h3>Recent Articles</h3>
</div>
<div class="menucontent">
<ul>
<li><a href="http://www.oneupgamers.com/articles/bestbeatemups.php">Best SNES beat em ups</a></li>
<li><a href="http://www.oneupgamers.com/articles/gamerslang.php">Gamer Slang</a></li>
<li><a href="http://www.oneupgamers.com/articles/best25snes.php">best 25 SNES games</a></li>
</ul>
</div>
<div class="menufooter"></div>
</div>
</div>
<div id="right">
<a href="http://forum.oneupgamers.com"><img src="http://www.webforumz.com/images/sidebaradvertise.jpg" width="190" height="483" ></a>
<br>
<br>
<p> </p>
<center>
<script type="text/javascript"><!--
google_ad_client = "pub-4560835351356928";
/* 160x600, created 2/11/08 */
google_ad_slot = "8594763721";
google_ad_width = 160;
google_ad_height = 600;
google_cpa_choice = ""; // on file
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
</div>
<h1 class="style1" style="text-align: center; z-index: -1;">oneupgamers.com</h1>
<div id="middle">
<div class="post">
<div class="postheader">
<h1>The Best Beat 'em Ups of the SNES!</h1>
</div>
<div class="postcontent">
<p align="right">February 13, 2008</p>
<p>Oneupgamers.com has just released its newest article <a href="http://www.oneupgamers.com/articles/bestbeatemups.php">The Best Beat 'em Ups of the SNES</a>. In the article the top 15 beat em ups are ranked and 15 more are given a review. All the beat em ups we could find for the SNES were tested and reviewed.</p>
<p>We'd like visitors of the site to share their opinions of the list with either the comments section on the article page or on the <a href="http://forum.oneupgamers.com" target="_blank">forums</a>.</p>
<p> </p>
</div>
<div class="postfooter">
</div>
</div>
</div>
<div id="middle">
<div class="post">
<div class="postheader">
<h1>Interactive Achievement Awards '08</h1>
</div>
<div class="postcontent">
<p align="right">February 9, 2008</p>
<p>The Academy of Interactive Arts and Sciences held its annual interactive achievement awards on February 7, 2008 for video games of the year in 2007. </p>
<p>Call of Duty 4: Modern Warfare mopped up by winning Overall GOTY (game of the year), Console GOTY, Action GOTY and an award for Outstanding Achievement in online gameplay. The Orange Box and its incredible addition, Portal, also won quite a few awards. Most notably, it won Computer GOTY.</p>
<p>Ive always been a big fan of the Call of Duty series and am glad to see that the series is finally getting that next level of respect that it has always deserved.</p>
<p>Some other major awards went as follows: </p>
<p>Massively Multiplayer Game of the Year - World of Warcraft: The Burning Crusade (Anyone surprised?).</p>
<p>Strategy/Simulation Game of the Year - Command and Conquer 3: Tiberium Wars (I haven't played it, but if the gameplay is half as deliberate as the others i'm surprised it won).</p>
<p>Sports Game of the Year - skate.</p>
<p>Adventure Game of the Year - Super Mario Galaxy (Shocker!).</p>
<p>If you'd like to see a full list of this years winners along with the candidates in each category then check out <a href="http://www.interactive.org/awards.php?winners&year=2008" target="_blank">The Academy of Interactive Arts & Sciences Awards page</a></p>
</div>
<div class="postfooter">
</div>
</div>
</div>
<div id="middle">
<div class="post">
<div class="postheader">
<h1>Gaming Culture: Gamer Slang</h1>
</div>
<div class="postcontent">
<p align="right">February 8, 2008</p>
<p>A friend of oneupgamers.com has been kind enough to submit an article with a list of gamer slang. Some of the entries are pretty funny and we here are hoping that you guys can join the discussion and share some of your favorites with us.</p>
<p>The article can be found <a href="http://www.oneupgamers.com/articles/gamerslang.php">here</a>.</p>
<p> Enjoy!</p>
</div>
<div class="postfooter">
</div>
</div>
</div>
<div id="middle">
<div class="post">
<div class="postheader"><h1>The Top 25 SNES Games Ever!</h1></div>
<div class="postcontent">
<p align="right">February 5, 2008</p>
<p>Tired of playing all those games everyone else says are good? Want to play a game that is actually fun?</p>
<p>Well look no further. Oneupgamers.com has just compiled the <a href="http://www.oneupgamers.com/articles/best25snes.php">best 25 SNES games</a> ever made into a list for all of you retro gaming fanatics.</p>
</div>
<div class="postfooter">
</div>
</div>
</div>
<div id="middle">
<div class="post">
<div class="postheader"><h1>The forum has been launched!</h1></div>
<div class="postcontent">
<p align="right">February 5, 2008</p>
<p>We have just launched our public <a href="http://forum.oneupgamers.com" target="_blank">forum</a> on oneupgamers.com</p>
<p>Discuss everything from which mmorpg you like best to which NES game is the greatest ever all on one site!</p>
</div>
<div class="postfooter">
</div>
</div>
</div>
<div id="middle">
<div class="post">
<div class="postheader"><h1>Oneupgamers.com Launch!</h1></div>
<div class="postcontent">
<p align="right">February 4, 2008</p>
<p>Oneupgamers.com has just officially been launched!</p>
<p>Your one stop site with all the retro gaming articles, forums and information that you'll ever need!</p>
</div>
<div class="postfooter">
<br>
</div>
</div>
<center>
<script type="text/javascript"><!--
google_ad_client = "pub-4560835351356928";
/* adsense banner 468x60, created 2/11/08 */
google_ad_slot = "6355447666";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
</div>
</center>
</body>
</html>
css
- Code: Select all
/*************norm**************/
body {
background-image: url(images/backgroundcheck.jpg);
z-index: 1;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0 auto;
padding: 0px;
background-repeat: repeat;
background-color: #000000;
color: #CCCCCC;
}
* {margin: 0px;padding: 0px;}
img { border-style: none;
}
p {
padding: 10px 10px 10px 20px;
display:block;
color:#999999;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold
}
a {
color:#6b7272;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
}
#container {
margin: 0px auto;
text-align: left;
width: 1010px;
}
#header{
height:304px;
width:777px;
background-image:url(images/header.jpg);
background-repeat: no-repeat;
}
#content{
}
#left{
width:192px;
float:left;
}
#middle{
margin: 0 auto;
width:550px;
}
#right{
width:192px;
float:right;
}
/********************* menu ****************************/
.menuheader{
width:192px;
height:33px;
background-image:url(images/menutop.jpg);
display:block;
}
.menucontent{
width:192px;
background-image:url(images/menumiddle.jpg);
padding-top:10px;
background-repeat: repeat-y;
}.menuheader h3{
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
padding-top: 8px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 20px;
}
.menufooter{
width:192px;
height:20px;
background-image:url(images/menubottom.jpg);
display:block;
}
.postheader,.menuheader{
color:#CCCCCC;
text-transform: uppercase;
}
/********************* post ****************************/
.post{
margin-bottom:15px;
}
.postheader{
background-image:url(images/posttop.jpg);
display:block;
width:550px;
height:33px;
}
.postheader h1{
padding: 8px 0px 0px 20px;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
font-weight: bold;
}
.postcontent{
background-image:url(images/postmiddle.jpg);
background-repeat: repeat-y;
padding: 20px 0px;
}
.postfooter{
background-image:url(images/postbottom.jpg);
background-repeat: no-repeat;
display:block;
width:550px;
height:20px;
}
/********************* header ****************************/
#header{
position:relative;
left: 50px;
right: 50px;
}
#header ul{
position:absolute;
top:253px;
display:block;
left:150px;
}
#header ul li{
display:inline;
text-align:center;
margin:auto;
width:auto;
border-right: 1px solid #6b7272;
}
.last{
border-right: 0px none #6b7272 !important;
}
#header ul li a{
display:inline;
text-align:center;
text-decoration:none;
padding: 0px 10px;
text-transform: uppercase;
}
#header ul li a:hover{
text-decoration:underline;
}
/********************* footer ****************************/
#footer{
width:850px;
}
#footer ul{
display:block;
margin-left:0px;
}
#footer ul li{
display:inline;
text-align:center;
margin:auto;
width:auto;
border-right: 1px solid #6b7272;
}
#footer ul li a{
display:inline;
text-align:center;
text-decoration:none;
padding: 0px 10px;
text-transform: uppercase;
}
#footer ul li a:hover{
text-decoration:underline;
}
#footer span{
color:#525757;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
text-align:center;
width:850px;
display:block;
padding: 15px 0px;
}
/********************* menu members ****************************/
.menu ul{
list-style-position: inside;
list-style-type: disc;
padding: 0px 0px 0px 20px;
color:#666666;
}
.menu ul li{
padding-top: 5px;
color:#666666;
}
.menu ul li a{
text-decoration:none;
padding: 0px;
text-transform: uppercase;
}
.menu ul li a:hover{
text-decoration:underline;
text-transform: uppercase;
}
.member{
display:inline;
float:left;
margin-left:10px;
}
.member span{
display:block;
text-align:center;
padding: 2px 0px 13px 0px;
text-transform: uppercase;
}
.member img{
width:75px;
height:70px;
border: solid 2px #999999;
}
.clear{
clear:both;
}
/*********************** new header***************************/
#wrap {
width:1010px;
margin: 0 auto;
}
#pageHeader{
background: transparent url(images/header.jpg) no-repeat top left;
margin-top: 0 auto;
width: 990px;
height: 170px;
float: left;
position: relative;
}
/*********navbar***********/
#navcontainer ul
{
text-align: center;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 5px;
margin-top: 0;
/* cancels gap caused by top padding in Opera 7.54 */
margin-left: 3px;
background-color: #ff6600;
color: white;
width: 100%;
font-family: Arial,Helvetica,sans-serif;
line-height: 18px;
position: absolute;
top: 110px;
width: 980px;
/* fixes Firefox 0.9.3 */
}
#navcontainer ul li
{
display: inline;
padding-left: 0;
padding-right: 0;
padding-bottom: 5px;
/* matches link padding except for left and right */
padding-top: 5px;
}
#navcontainer ul li a
{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 5px;
padding-top: 5px;
color: white;
background-color: #FF6600;
text-decoration: none;
border-right: 1px solid #fff;
}
#navcontainer ul li a:hover
{
background-color: #ff4500;
color: black;
}
#navcontainer #active { border-left: 1px solid #fff; }
Thanks for looking
Last edited by oneup; Feb 18th, 2008 at 18:53.
Reason: fixed code tags
|
how can I tile 2 background images one on top of another?
Feb 18th, 2008, 18:33
Similar Threads
