Creating a curved header

gerry87

Hey, I was wondering if something like this is possible. I'm looking to make a slight change in the design of a site www.swoponomics.com/forum

I was thinking something like http://swoponomics.com/hosted/shopped.png would suit it, any thoughts on how something like this would look? Would it be possible or easy to do?

Goodshape

Sure. Just think of that big 'swoop' at the top as a background image.

gerry87

I was thinking that, but the way it's set up, the white container box is set to take up a certain % of the screen. Would a background image be able to be set to match this so they line up on different resolutions?

I'm not 100% stuck on that design, would it be possible to have any sort of non-box header?

p

Background images can't stretch, they just tile, so you would need to put the image inline and then put the logo image on top of it using z-index since you don't want the image to stretch.

It's kind of tricky to achieve things like this precisely when you've got a website that stretches, but that technique might do the trick for you.

louie

For something like that you need to have a set width header or you can expand the last 1px of the image.

gerry87

p wrote: »

Background images can't stretch, they just tile, so you would need to put the image inline and then put the logo image on top of it using z-index since you don't want the image to stretch.

It's kind of tricky to achieve things like this precisely when you've got a website that stretches, but that technique might do the trick for you.

Sweet, i'm just giving it a shot now. I made a container and put it above the main one, going to stretch the swoop thing in that. I'll have a look at that z index part when i get this working. Cheers.

p

Good luck with it - if you get half way there, just yell and we'll try help you out!

gerry87

Hey, so i gave it a shot, changed it a little cos i couldn't get it right. http://swoponomics.com/forum/

Any thoughts on how it looks? Any ideas that might look better?

p

Shame about the white border, but that's pretty good. It's kinda hard to retrofit those things.

I'd suggest making the logo a transparent gif so you don't get the square overlap when your browser window is too narrow.

If you want to make it look more like your original mockup, you could also turn off the padding on the #container div, to get rid of the border. But you'll need to make the curve a transparent gif too in that case.

G'luck!

gerry87

p wrote: »

Shame about the white border, but that's pretty good. It's kinda hard to retrofit those things.

I'd suggest making the logo a transparent gif so you don't get the square overlap when your browser window is too narrow.

If you want to make it look more like your original mockup, you could also turn off the padding on the #container div, to get rid of the border. But you'll need to make the curve a transparent gif too in that case.

G'luck!

I tried putting a container above that one with no boarder, the trouble was that since one has a fixed boarder and a % width, and one just has a % width they wouldn't match up on different resolutions. Off the top of your head would there be a way around this?

Another issue was matching the gradient of the background to the swoop... is it possible to have a container with a transparent background? then i could have the white swoop as the only picture so the gradients would match.

Overall does it look alright w/ the white boarder or does it just look like a cheap version of what i was trying to do?

edit: i made the logo background transparent so the logo sits behind it, it sorts out the white box thing for all but enormous or tiny screens. I'll be getting the hi res photoshop file of the logo todat or tomorrow so it will look a bit crisper then

p

It's not as nice as your origina mockup, but it's not too bad.

As you can see, there's a lot of tricky issues involved in getting it right. It's very doable, but just time consuming.