/    Sign up×
Community /Pin to ProfileBookmark

Expanding Header Graphic

Copy linkTweet thisAlerts:
Aug 05.2004

Will someone tell me the name of this technique I’m about to describe? I can’t think of what it’s called so I can’t look it up! 😮

Basically, an image is actually quite larger than what is shown on screen. I’ve seen a website that the header graphic is actually like 1280 pixels wide but only the part that needs to be shown shows up. If you have your browser window down to 800 pixels wide, it only shows so much. When you begin to widen your browser window, the header graphic begins to show more of the image.

Will someone please tell me the name of that technique? Thanks!

to post a comment
CSS

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Paul_JrAug 05.2004 — Could you point us to this page? Most likely they just have a large image set as a background for some relatively sized element. Then, as the element increases in size (when you resize the text, or increase the window size), more of the background image is revealed.
Copy linkTweet thisAlerts:
@ray326Aug 05.2004 — I don't know that there's a name for it but it sounds like a background image for a div. The "Sliding Doors" articles at ALA make use of this technique.
Copy linkTweet thisAlerts:
@iamlucky13Aug 05.2004 — From your wording, I think Ray might be closer to what you want, but I'll add this anyway. It may be pages using scalable vector graphics (.svg), which can be resized accurately by the browser, if it supports that format. Problem is, not all browsers do. I think their supposed to be included in the xhtml 2 specs.
Copy linkTweet thisAlerts:
@NeczyAug 05.2004 — Perhaps something along the lines of:

body {
background: #FFF url(background.gif) top center no-repeat;
background-attachment: fixed;
}

Not sure if your talking about something along those lines...
Copy linkTweet thisAlerts:
@PrimalauthorAug 06.2004 — Okay, I finally found the site I was thinking of. It's [URL]http://www.meyerweb.com[/URL] Take a look at the header. I see it called #sitemast in the source. How does he keep the entire image from showing?

I don't really want to use this technique for a website header but for row headers in a datagrid the programmers here at work will be using. Any advice on how to do this?
Copy linkTweet thisAlerts:
@ray326Aug 06.2004 — It's the background of a div.
Copy linkTweet thisAlerts:
@pawkyAug 06.2004 — definitely a bg and the code Neczy posted will easily do it.
×

Success!

Help @Primal spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...