header image across top of page |
header image across top of page |
justine |
Aug 12 2010, 05:09 PM
Post
#1
|
Member Group: Members Posts: 54 Joined: 4-February 09 Member No.: 7,724 |
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/ |
Darin McGrew |
Aug 12 2010, 06:01 PM
Post
#2
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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.
|
justine |
Aug 12 2010, 07:16 PM
Post
#3
|
Member Group: Members Posts: 54 Joined: 4-February 09 Member No.: 7,724 |
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! |
pandy |
Aug 12 2010, 07:52 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
It isn't stretching. This background image is centered http://www.lancastersciencefactory.org/_di...ages/header.jpg and this one is tiling behind it http://www.lancastersciencefactory.org/_di...ages/header.jpg .
|
Darin McGrew |
Aug 12 2010, 10:02 PM
Post
#5
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
The repeating image appears to be http://www.lancastersciencefactory.org/_di...er_repeater.jpg
|
Darin McGrew |
Aug 12 2010, 10:04 PM
Post
#6
|
WDG Member Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
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. |
wgabrie |
Aug 12 2010, 10:19 PM
Post
#7
|
Advanced Member Group: Members Posts: 148 Joined: 11-July 10 Member No.: 12,279 |
It's done with CSS background properties. Specifically: background-image and 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; } This post has been edited by wgabrie: Aug 12 2010, 10:30 PM |
Lo-Fi Version | Time is now: 29th March 2024 - 05:23 AM |