3 replies [Last post]
blueparukia
Offline
Enthusiast
Australia
Last seen: 15 years 2 weeks ago
Australia
Timezone: GMT+10
Joined: 2007-06-27
Posts: 63
Points: 0

OK, I have three images for my header. One fore each side of the header, and one to go between them (repeating).

How do I do this in CSS, I know the background-repeat will come in, but I'm not sure how. I just wanna make the header go a long way.

I have attached the images, thanks,

BP

AttachmentSize
1_bg.png233 bytes
chead_l.png667 bytes
chead_r.png776 bytes
blueparukia
Offline
Enthusiast
Australia
Last seen: 15 years 2 weeks ago
Australia
Timezone: GMT+10
Joined: 2007-06-27
Posts: 63
Points: 0

I've made a start on this,

I've made a start on this, and I think I'll be able to get it:D

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You're doing it the wrong

You're doing it the wrong way. You shouldn't be thinking in terms of left and right but rather in terms of top and bottom. What happens when people have the text in their browser set larger than you do? It's going to stick out the bottom because the images aren't deep enough.

If you're doing a fixed width layout, then create the top of the header with both left and right curves as a single image and then make the image for the main part of the header the full width to include both sides and set it to repeat-y. That way, no matter how big the text, the repeating bg-image behind it will always contain it.

If you're doing a fluid layout, then Google Sliding Door Tabs.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

blueparukia
Offline
Enthusiast
Australia
Last seen: 15 years 2 weeks ago
Australia
Timezone: GMT+10
Joined: 2007-06-27
Posts: 63
Points: 0

The site isn't going to be

Thanks, I got it all working now Laughing out loud