Stretchy header image makes me jealous

[eclipse]

Hi all,
http://mightychurch.com/ has this really cool Expression Engine CMS / forum, and there's a lot I like about this site. But one thing in particular grabbed me. What's going on with the abstract header image? (Nice design BTW).

It does not look like some sort of repeating png doing the repeat X trick (See how much I've learned about CSS! ) but something else is going on to make it "stretchy" and I think it mainly stretches in the middle. Any way I can replicate that for a SMF forum I'm trying to style?

Edit to add:
Also considering the header image... how wide is too wide.

EG: http://mightychurch.com uses a header image that is 1300 px wide! Is that too wide?

Also, there doesn't appear to be a LOT of fancy CSS on the header... I looked it up in Firebug and it just says...

#header img {mightychurch.css (line 57)
min-width:1300px;
width:100%;
}
img {mightychurch.css (line 29)
border:0 none;
}
* {thickbox.css (line 4)
margin:0;
padding:0;
}

 

[SelfMadeCelo]

This is for the header:

#header {
height:135px;
overflow:hidden;
position:relative;
width:100%;
}

I'm trying to grasp what you mean by stretching...The image is 1300px and just goes off to the right. If you make the browser wider and it shows more of the img. That's what "overflow:hidden" is for. Disable that and the image stays the same size. Get it?

 

[eclipse]

I've downloaded the image and looked at it in preview and can see what it is meant to look like at 1300px.

If I drag my browser right across the 23 inch screen it really does stretch out. So I'm probably not describing it well but it appears to stretch to me, in Firefox in a way it does not stretch in Preview.

Is it because it is set to 100% wide? It just tries to reach the width of the browser? Maybe I should have chosen a smaller image if people have smaller screens, but this was the site I noticed it on.

 

[design-is]

This is the bit that matters:

#header img {width: 100%;min-width: 1300px;}

I think that's self explanatory. The image (img) within the header (#header) will stretch to the browser width 100% but will not compress smaller than 1300px.

I prefer to use images of about 3000px wide in that situation. Then even on a 30" display in a maximized window the graphic will continue unstretched.

For simpler ones obviously you just have a thin repeating strip.

/Doug

 

[eclipse]

Sorry, you're absolutely right.... I don't know my CSS that well. I've been playing around with the code and experimenting with and without the width 100% and it's that simple. How embarrassing!

Now.... about that large header image of yours. I'm trying to put together a SMF forum that will attract all sorts of political activists.

(We want to abolish the Australian states and have a 2 tier government system of a streamlined National government and service provision through the local/regional councils taking over currently state run systems. Off topic, but what a topic! And Australia doesn't have that many states. Can you imagine the sheer MONEY it would save in State government fees alone somewhere like the USA? We want local government to MEAN something, and we want the National departments of health, education, etc streamlined, integrated, and ultimately responsible! No more passing the buck back and forth between State and Federal goverments!)

So, the bottom line is my forum is full of fairly academic Phd types, so I need a fairly clean, easy to read forum that will mainly be whites and creams. So I'll need a catchy header. How big is too big? How wide is too wide? 3000px! I wouldn't have dreamed of it... how does the website beneath behave? How do people with smaller monitors access it? Do they have to drag scroll bars to the side as they read?

 

[angelwatt]

On the topic of how wide is too wide?

The answer can vary depending on context and audience. With a general web site, I would throw out 1000px as the max min, by which I mean the page should be able to fit on 1000px, but also still would be OK to expand for larger monitors. Optimally, you should try to make the site reasonably fluid, so it can adapt to mobile devices and desktop machines alike. I really don't care for fixed-width sites. Personally, I don't set px sizes in my design, I use em measurements.

 

[veyron85]

Wow they are so cool, i have to try this in my next project.

 

[Mal]

On the subject of "stretchy" headers, I created one I'm rather proud of: JapanCPI. I placed the image of Fuji with a transparent background on top of a repeating background image, so the whole thing doesn't take much bandwidth, but will stretch almost indefinitely without issues (don't recall right now if I set a max-width so the rest of the content wouldn't stretch too much, but probably not). I need to go back and reoptimize the images to get a bit better quality, but I still like the effect it created.

jW

 

[angelwatt]

On the subject of "stretchy" headers, I created one I'm rather proud of

I give it a thumbs up Though I did notice on the gradient background is isn't overly smooth toward the bottom, unless that's an intended effect. It doesn't really hurt anything.

I've been thinking of doing that with my own site, different images, but same effect. I can't think of an image I want in my header though.

 

[snickelfritz]

On the subject of "stretchy" headers, I created one I'm rather proud of: JapanCPI. I placed the image of Fuji with a transparent background on top of a repeating background image, so the whole thing doesn't take much bandwidth, but will stretch almost indefinitely without issues (don't recall right now if I set a max-width so the rest of the content wouldn't stretch too much, but probably not). I need to go back and reoptimize the images to get a bit better quality, but I still like the effect it created.

jW

I like the technique you've used there; it's simple and much more elegant than stretching the image, or setting a lower limit below which the image is clipped.

 

[design-is]

Sorry, you're absolutely right.... I don't know my CSS that well. I've been playing around with the code and experimenting with and without the width 100% and it's that simple. How embarrassing!
<snip>
How big is too big? How wide is too wide? 3000px! I wouldn't have dreamed of it... how does the website beneath behave? How do people with smaller monitors access it? Do they have to drag scroll bars to the side as they read?

I didn't mean to sound condescending, was just trying to be as clear as posible

I think you got me a little wrong however with my width suggestion. I don't think anyone should have a browser window open to the max on a screen 30" - there's just no need. But if you were to have a background which just doesn't work repeated, I think it's important to cater for all posibilities. I don't like maximising a window to find the background is aligned right and ends before my browser. I'll try and explain myself better if you don't understand - let me know

 

[Mal]

I give it a thumbs up Though I did notice on the gradient background is isn't overly smooth toward the bottom, unless that's an intended effect. It doesn't really hurt anything.

Yeah, that's the one part I'm not exceptionally proud of, but I've never bothered fixing it since it didn't seem to matter that much. I probably will before the next time people really start using the site (it's basically used once every two year right now, since that's when the event it references happens).

jW

 

[eclipse]

I think I've fixed it... it may have been a bad selector.