At 12:14 AM 7/21/2006, David Sharp wrote:
>>I actually originally had the background image on the header, but when I >>did that, it created a white space between the header and the subheader >>that I couldn't figure out how to get rid of. When I moved the background >>image to the wrapper, that's when the white space disappeared. >> > >The white space is the bottom margin of div#header h1. Because the margin >of #header is 0, this margin sticks out past the header creating the >unsightly gap. padding-bottom on the #header would be a better solution. >>Even if the image was moved into the header, wouldn't the text squeeze >>out anyway when the browser is shrunk significantly b/c the image is a >>fixed size? >> >Perhaps the pattern you currently have could fade to a solid colour at the >top. Then give the #header this colour, and position your background image >at the bottom. >div#header { > background : #333333 /* or whatever your colour is */ > url(whatever.gif) bottom left repeat-x; >} >This way your page will look "ideal" at the default text size, but will >still look pretty good when text is bumped up. >Alternately you could make the background bigger than it needs to be - due >to the nature of the "N" taking space from the top and bottom (as will be >the case at default text size) will leave it still looking like an "N". In >this case align the background with the center of the header using >{background-position : 0% 50%}. In this case I would still give the header >the solid background colour in case the text is bumped higher than your >image can handle. > >I think the key is to allow the page to accommodate changes gracefully - >it won't always look pixel perfect. But your site is looking really good. >I wish my first sites looked half as decent! > >Hope this helps. >D# Hi David, Thanks so much for the helpful tips. I just implemented them and it looks great! I moved the background to the div#header,and adjusted the header margins/padding. Also used your first suggestion of setting a background color behind the image, and I think it looks perfectly adequate for significantly resized windows. Very grateful for your help, Janet ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/