The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> header image across top of page
justine
post 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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 12 2010, 06:01 PM
Post #2


WDG Member
********

Group: Root Admin
Posts: 7,998
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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
justine
post Aug 12 2010, 07:16 PM
Post #3


Member
***

Group: Members
Posts: 54
Joined: 4-February 09
Member No.: 7,724



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Aug 12 2010, 07:52 PM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,218
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 .


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 12 2010, 10:02 PM
Post #5


WDG Member
********

Group: Root Admin
Posts: 7,998
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
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Aug 12 2010, 10:04 PM
Post #6


WDG Member
********

Group: Root Admin
Posts: 7,998
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.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
wgabrie
post 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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 29th July 2014 - 03:52 PM