header image

[ngreenwood6]

I am trying to figure out how to get my header image to display at 100% instead of a fixed width. I have an image that is 1280px. But my page is fluid (100%). So when the user has a lower resolution the right side of the image is getting cut off. Is there a way to have it resize? The reason it matters is because the top corners are rounded and when it cuts off they are just straight instead of rounded.

[ldougherty]

You should have 3 sections with section a being the left corner of the image, second b being the middle of the image and section c being the right corner of the image.

 

This way you can set the middle div to 100% therefore using all the available space on the page.

[ngreenwood6]

can you give me an example of how I would do this?

[haku]

Is the background color of the site a solid color? If so, create rounded, but with the outsides of the corner being the background color, and the inside (the circular part) being transparent. You can visualize this by imagining a square, with a circle missing out of the inside of it. Then take that square and split it up the middle, and accross the middle, so that you have four little squares, each with 1/4 of a circle missing from them. Then you absolutely position those four pieces in the four corners of the containing div, so that they cover the header image. This way, the 'corners' of the squares, which are the same color as the background, blend into the background, and it looks like your image has rounded colors.