HTML Help

youthedog4 · Joined: 17 Nov 2009 Posts: 2

My background image shows over my headings and other text. http://youthedog.2x.nu
CSS code for it.
Code: a {
text-decoration: none;
}
#background {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
}

.stretch {
width:100%;
height:100%;
}</style>
After
Code: <div id="background">
<img src="Untitled-1.bmp" class="stretch" alt="" />
</div>

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4259 Location: MS

CSS:

Code: #wrap {
width: 1024px;
height: 612px;
margin: 0 auto;
background: #fff url(http://youthedog.2x.nu/Untitled-1.bmp) no-repeat center scroll;
}

You don't need the full URL for image. Just use the relative path as you had it. Not a good idea to use CSS keywords as selector names.

HTML:

Code: <div id="wrap">
<p>Contents Here</p>
</div>

Let me know if you want full size other than 1024X612.

sticks464 · Joined: 31 Dec 2006 Posts: 2625

I must be going blind because I can't find a div with the id of background.

See if this works for you

Code: <!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=utf-8" />
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" />
<link rel="stylesheet" type="text/css" href="ddsmoothmenu-v.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript" src="ddsmoothmenu.js">
</script>

<script type="text/javascript">

ddsmoothmenu.init({
mainmenuid: "smoothmenu2", //Menu DIV id
orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
//customtheme: ["#804000", "#482400"],
contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>
</head>
<body>
<div id="background">
<h1>
<script type="text/javascript">

//Write a "Good morning" greeting if

//the time is less than 10

var d=new Date();

var time=d.getHours();

if (time<10)

{

document.write("<center><b>Good Morning!</b></center>");

}
else if (time>10 && time<18)

{

document.write("<center><b>Good Afternoon!</b></center>");

}

else if (time>18 && time<24)

{

document.write("<center><b>Good Night!</b></center>");

}

</script>
<center><strong>I have not worked on my site for awhile because I was preoccupied
But I am going to have a better design than this in about a month.</strong></center></h1>
<h2>
<script type="text/javascript">

//You will receive a different greeting based

//on what day it is. Note that Sunday=0,

//Monday=1, Tuesday=2, etc.

var d=new Date();

theDay=d.getDay();

switch (theDay)

{

case 1:
document.write("<center>Worst day of the week... Monday..</center>");
break;
case 2:
document.write("<center>Whoo Tuesday!!</center>");
break;
case 3:

document.write("<center>Wednesday fails.</center>");
break;
case 4:

document.write("<center>Almost to the weekend whoo! Thursday!</center>");
break;
case 5:

document.write("<center>Finally Friday</center>");

break;

case 6:

document.write("<center>AWESOME Saturday</center>");

break;

case 0:

document.write("<center>Boring Sunday</center>");

}
</script>
<h2 style="margin-top:100px">Games</h2>

<div id="smoothmenu2" class="ddsmoothmenu">

<ul>
<li><a href="http://youtube.com/">Youtube</a></li>
<li><a href="#">Games</a>
<ul>

<li><a href="visible/visible.html">Visible</a></li>
<li><a href="http://armorgames.com/">More games</a></li>
<li><a href="http://kongregate.com/">EVEN more games.</a></li>
<li><a href="pandemic/pandemic.html">Pandemic 2</a></li>

</ul>
</li>
<li><a href="#">Give me ideas on what to put here.</a></li>
<li><a href="#">@ youthedog4atgmail.com</a>
</li>
</ul>
<br style="clear: left" />
</div>
</p>

</div>
</body>

<script language=JavaScript>

</script>
</html>

css
Code: body { background: #008000 url(Untitled-1.bmp);}
a {
text-decoration: none;
}
#background {position: relative; background: url(Untitled-1.bmp) no-repeat; }

h1 { color: red }
a:link {
color: blue /*The color of the link*/
}
a:visited {
color: black /*The color of the visited link*/
}
a:hover {
color: yellow /*The color of the mouseover or 'hover' link*/
}
td {
font-family: Verdana,Arial,Helvetica /*Properties of items inside of a table*/
}

/*Everything within the BODY tags*/
{
scrollbar-base-color: blue; /*Scrollbar color*/
scrollbar-arrow-color: red; /*Scrollbar arrow color*/
scrollbar-DarkShadow-Color: grey; /*Scrollbar shadow color*/
FONT-FAMILY: Verdana,Arial,Helvetica /*The font properties*/
}
p { cursor: default }
h1 { cursor: crosshair }
h2 { cursor: default }

Any background image you don't want to repeat, add this to the style rule
Code: body { background: #008000 url(Untitled-1.bmp) no-repeat;}

The image you want on top should be in the background div.

(Payneless beat me to it again)

PayneLess Designs · Joined: 28 Feb 2007 Posts: 4259 Location: MS

sticks464 wrote: (Payneless beat me to it again) :lol: That's because I haven't the time to do full coding and I get there firstest with the leastest. :P Rather they do it themselves. Only way to learn.

Why Validate?: http://validator.w3.org/docs/why.html