HTMLHelp Forums [Powered by Invision Power Board]

Posted by: justine Aug 12 2010, 05:09 PM

Hi. I am wondering if you can tell me how this site gets their header and menu bar to go all the way across the page especially since it is an image.
Thanks!

http://www.lancastersciencefactory.org/

Posted by: Darin McGrew Aug 12 2010, 06:01 PM

It looks like they use multiple backgrounds. Some are background colors or repeating background images that stretch the width of the display area. Some are non-repeating background images that fit the fixed-width layout that is centered in the display area.

Posted by: justine Aug 12 2010, 07:16 PM

QUOTE(Darin McGrew @ Aug 12 2010, 06:01 PM)

It looks like they use multiple backgrounds. Some are background colors or repeating background images that stretch the width of the display area. Some are non-repeating background images that fit the fixed-width layout that is centered in the display area.

Is this another way I can make my header image stretch across the screen? That way sounds a bit complicated.
Thanks so much!

Posted by: pandy Aug 12 2010, 07:52 PM

It isn't stretching. This background image is centered http://www.lancastersciencefactory.org/_display/images/header.jpg and this one is tiling behind it http://www.lancastersciencefactory.org/_display/images/header.jpg .

Posted by: Darin McGrew Aug 12 2010, 10:02 PM

The repeating image appears to be http://www.lancastersciencefactory.org/_display/images/header_repeater.jpg

Posted by: Darin McGrew Aug 12 2010, 10:04 PM

Another approach would be the one shown here:
http://www.alistapart.com/articles/customcorners/
http://www.alistapart.com/articles/customcorners2/

But I don't think it's any simpler than the one used at the lancastersciencefactory site.

Posted by: wgabrie Aug 12 2010, 10:19 PM

It's done with http://htmlhelp.com/reference/css/color-background/. Specifically: http://htmlhelp.com/reference/css/color-background/#background-image and http://htmlhelp.com/reference/css/color-background/#background-repeat.

Example, Here is a CSS snip-it from one of the site's style sheets:

CODE

body {
background: #880c18 url(../images/header_repeater.jpg) repeat-x top;
}

Printable Version of Topic

Click here to view this topic in its original format