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:

Code:

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:

Code:

<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:

Code:

<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:

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):

Code:

<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.

Thread: Help with stretched Background

Thread Tools

Search Thread

Help with stretched Background

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions