Forum Moderators: not2easy
The main body of my site is a good 500 pixels tall, which I thought was enough space, but it wasn't. So now when I stretch it out my background stays the same and it appears white at the bottom.
Normally: <snip>
With body stretched: <snip>
If you look at the examples, you can see the bottom and the top of the site are not solid, but the middle is.
What I was thinking is that I could make the top gradient/navbar its own image and align to the top, and then make the gradient at the bottom its own image and align to the bottom, and then leave the actual background color of the site the solid blue in the middle. Is there a way to do this?
Thanks,
Alex
[edited by: swa66 at 10:22 pm (utc) on Feb. 11, 2009]
[edit reason] No personal URLs, please see ToS [/edit]
However, you have several options. No problem with going with a gradient for the main background image, and then adding a graphic image underneath or over top. Over top is probably a lot easier. Your problem is arising from a gradient that is is simply not tall enough. You can't repeat it because it will look terrible. Just create a new gradient that is taller than anything you need, or match the bottom color of the gradient in with background color:.
body {
background: #266a82 url(background.gif);
}
or
body {
background-color: whatever;
} and then put in your gradient images top and bottom in their own <div>s.
<edit> typ0 </edit>
[edited by: D_Blackwell at 10:29 pm (utc) on Feb. 11, 2009]
Also, here is an example I created of what I'm trying to do just smaller.
<snip>
[edited by: swa66 at 6:09 pm (utc) on Feb. 12, 2009]
[edit reason] No personal URLs, see ToS [webmasterworld.com] [/edit]
What you are talking about is taking a graphic and repeat-x across a header and another with a footer. Put each in its own <div> and set the background color for the body. The header is simple enough. The footer may need positioning help to ensure that it stays on the bottom; maybe something like - #footer {position: absolute; bottom: 0;}. Mock up a simple framework. If you have a problem, describe the issue and post the framework HTML and CSS. Someone will look at the relevant code.
It's got to be a simple thing. My first guess is that you designed 'pixel perfect' and the design came apart when you exceeded that limiting factor.
The main body of my site is a good 500 pixels tall, which I thought was enough space, but it wasn't. So now when I stretch it out my background stays the same and it appears white at the bottom.
#background1 {
background-attachment:scroll;
background-repeat:repeat-x;
background-image:url(images/background1.gif);
}I don't know if placement of where it goes on the stylesheet matters.
(big block of code next)
So then I'm assuming I have to put this in somewhere: "<div id="background1"></div>" but I don't know where, and I tried a few places, but I can't seem to find where it needs to go, and I don't know if I have to put height and width attributes, and if I do I have no idea what the values are.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TheDeathOfHell-Portfolio-UNDERCONSTRUCTION</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="site_layout2.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" rightmargin="0" marginheight="0" marginwidth="0">
<!-- Save for Web Slices (website5.psd) -->
<div id="site_layout">
<table width="800" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td>
<img src="images/btn_home_up.gif" width="76" height="36" alt=""></td>
<td>
<img src="images/btn_art_up.gif" width="75" height="36" alt=""></td>
<td>
<img src="images/btn_flash_up.gif" width="75" height="36" alt=""></td>
<td colspan="2">
<img src="images/btn_blog_up.gif" width="75" height="36" alt=""></td>
<td>
<img src="images/btn_about_up.gif" width="75" height="36" alt=""></td>
<td colspan="2"><div id="bar"></div></td>
<td>
<img src="images/btn_contact_up.gif" width="106" height="36" alt=""></td>
</tr>
<tr>
<td colspan="6"><div id="logo"></div></td>
<td colspan="2" rowspan="2"><div id="logo_right"></div></td>
<td rowspan="2"><img src="images/website5_10.gif" width="106" height="125" alt=""></td>
</tr>
<tr>
<td colspan="6"><div id="logo_bottom"></div></td>
</tr>
<tr>
<td colspan="9"><div id="body"></div></td>
</tr>
<tr>
<td colspan="9"><div id="footer_spacer"></div></td>
</tr>
<tr>
<td colspan="9"><div id="footer_top"></div></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/footer_bottom_left.gif" width="258" height="21" alt=""></td>
<td colspan="3">
<img src="images/spacer_copyright.gif" width="298" height="1" alt=""></td>
<td colspan="2" rowspan="2">
<img src="images/footer_bottom_right.gif" width="244" height="21" alt=""></td>
</tr>
<tr>
<td colspan="3"><div id="footer"></div></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="76" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="75" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="75" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="32" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="43" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="75" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="180" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="138" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="106" height="1" alt=""></td>
</tr>
</table>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
I don't know if placement of where it goes on the stylesheet matters.
It depends, CSS works by giving priority to things based on specificity, preference between where the style is define and as a last resort order it is read.
specificity is a concept that needs some study to understand properly. If you don't want surprises, I'd suggest to invest a bit of time to understand it fully.
So then I'm assuming I have to put this in somewhere: "<div id="background1"></div>"
I'm not entirely sure where you want the background to appear, but you do not need a div. an id="background1" can be added to any element you already have, e.g. a table, table row, a table cell (if you insist on having tables)
I'm not sure what is in the table (and with the slices it'll be hard to explain I'm sure).
Now as your table already has an id, you might need to change the nae in the CSS instead of adding it to the html.
A last thing: slices aren't going to help you in a modern browser/server to speed up things, on the contrary.
