PDA

View Full Version : Help with stretched Background



pattie1213
07-05-2008, 01:47 PM
Hey, so i'm trying to make a stretched background at the back of my layout, but it keeps covering it.

http://www.moon.twilight-melody.org/fakeheader.php

it looks like that. Can someone help me, so that it can go at the back of the layout, and stretch till the end of the page? I think my coding is wrong.

jscheuer1
07-05-2008, 02:55 PM
You cannot stretch background images. You can appear to extend them by matching the background color to their background color:


body, html, div, font, p, td {
font-family: Tahoma;
font-size: 7pt;
line-height: 7pt;
color: #000000;
margin: 0;
padding: 0;
background-color: #84A753;
}

In another matter I notice that your:


<div style="position:absolute; top:-20; left:0; background:url(http://i282.photobucket.com/albums/kk280/moon-productions/streacth2.png); height:150px; width:100%;"></div>

is covering the top of your table. You could make it:


<div style="margin-top:-20px; left:0; background:url(http://i282.photobucket.com/albums/kk280/moon-productions/streacth2.png); height:150px;"></div>

and place it before your table in the source code:


<div style="margin-top:-20px; left:0; background:url(http://i282.photobucket.com/albums/kk280/moon-productions/streacth2.png); height:150px;"></div>
<!-- ImageReady Slices (Untitled-2) -->
<TABLE WIDTH=805 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="http://i282.photobucke . . .

That would probably work out better.

jscheuer1
07-05-2008, 04:28 PM
Actually, having looked at this a bit more, I see you want something more like (full page):


<HTML>
<HEAD>
<TITLE>Untitled-2</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<style type="text/css">

body, html, div, font, p, td {
font-family: Tahoma;
font-size: 7pt;
line-height: 7pt;
color: #000000;
margin: 0;
padding: 0;
background-color: #84A753;
}

.entrytext{
font-weight: normal;
}
h1 {
background: #000000;
color: #ffffff;
font-family: Tahoma;
font-size: 10pt;
line-height: 10pt;
font-weight: bold;
text-transform: uppercase;
text-align: right;
margin: 0;
margin-top: 1px;
margin-bottom: 1px;
padding-top: 2px;
padding-bottom: 2px;
border-bottom: 2px dotted #ffffff;
}
h2 {
background: #404040;
color: #ffffff;
font-family: Tahoma;
font-size: 7pt;
line-height: 7pt;
font-weight: bold;
text-align: left;
margin: 0;
width: px;
margin-top: 1px;
padding: 0px;
padding-bottom: 0px;
border-bottom: 0px solid #FFFF00;
}
h3 {
background: #c0c0c0;
color: #000000;
font-family: tahoma;
font-size: 7pt;
line-height: 7pt;
font-weight: normal;
text-transform: none;
text-align: left;
margin: 0;
margin-bottom: 1px;
padding: 0px;
padding-bottom: 1px;
border-bottom: 0px solid none;
}
.special {
font-family: Tahoma;
font-size: 7pt;
color: #293763;
font-weight: bold;
line-height: 7pt;
}



a:link, a:visited, a:active {
text-decoration: none;
font-weight: bold;
font-family: tahoma;
color: #ffffff;
cursor: crosshair;
}
a:hover {
text-decoration: none;
font-weight: bold;
font-family: tahoma;
color: #000000;
cursor: crosshair;
}


a.nav, a.nav:link, a.nav:active, a.nav:visited {
height:10;
padding:0;
padding-left:1;
padding-right:1;
color:#000000;
border-bottom:1px solid #000000;
display:block;
text-transform:uppercase;
background:#ffffff;
}
a.nav:hover {
height:10;
padding:0;
padding-left:1;
padding-right:1;
color:#000000;
border-bottom:1px solid #000000;
display:block;
text-transform:uppercase;
background:#ffffff;
}



input, select {
color: #FE7785;
background: #ffffff;
font-size: 7pt;
font-weight: normal;
font-weight: bold;
text-decoration: none;
font-family: Tahoma;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #000000;
}
TEXTAREA {
color: #FE7785;
background: #ffffff;
font-size: 7pt;
font-weight: normal;
text-decoration: none;
font-family: Tahoma;
text-align: center;
border-width: 1px;
border-style: solid;
border-color: #000000;
}

</style>
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div style="position:absolute; top:-0; left:0; background:url(http://i282.photobucket.com/albums/kk280/moon-productions/streacth2.png); height:150px; width:100%;"></div>
<!-- ImageReady Slices (Untitled-2) -->
<TABLE style="position:relative;" WIDTH=805 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="http://i282.photobucket.com/albums/kk280/moon-productions/newmoon4_01.png" WIDTH=805 HEIGHT=150 ALT=""></TD>
</TR>

<TR>
<TD>
<IMG SRC="http://i282.photobucket.com/albums/kk280/moon-productions/newmoon4_02.png" WIDTH=805 HEIGHT=133 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="http://i282.photobucket.com/albums/kk280/moon-productions/newmoon4_03.png" WIDTH=805 HEIGHT=171 ALT=""></TD>
</TR>
<TR>

<TD>
<IMG SRC="http://i282.photobucket.com/albums/kk280/moon-productions/newmoon4_04.png" WIDTH=805 HEIGHT=154 ALT=""></TD>
</TR>
</TABLE>
<!-- End ImageReady Slices -->


</BODY>
</HTML>

However, the background-color: #84A753; will be off in IE because it is based upon your .png backgrounds which would need their gamma chunks striped from them to be the same color in IE as in other browsers.

pattie1213
07-05-2008, 05:54 PM
omg! thank you soo much! I love you! haha, lol, this is an awsome site.