background repeat for two images on header area

[mrjoz]

I wanted a liquid layout heading for my webpage. as its a unique image i took a slice from the left edge and added it to a div. then placed the main heading image in another div and floated it to the right. my logic is that it can resize and fill the growing/shrinking white-spaces with the contents of the left div.

hi, iam at www.lovebirdweddings.co.uk

as you can see (if you run the problem) i haven't quite got it right. any help would be nice as i'm now all out of ideas.

[drhowarddrfine]

Something to go on. Get rid of the left div. It's only in the way. Add html,body{heigh t:100%} to your CSS. Change background-position in the right div to only 'center'. Add 'height:100%' to the right div.

That should center everything fluidly but it still needs adjustments.

[mrjoz]

sorry but this doesn't work. as the image is split colour (blue/green) at varying heights it doesn't flow correctly. which is why i had the image placed to the "right" in the first place...so's to avoid half the problem.

i was thinking maybe the "white-space" command might have helped, though i couldn't find that out.

[drhowarddrfine]

Are you saying you want the blue to be on the left/right all the way across?

[mrjoz]

i'm on a 19" screen so its easy for me to see the error.
from the link http://www.lovebirdweddings.co.uk if you break out of full screen mode and resize the whole IE/FF window you'll see......

image on the right - correct
slice on the left - correct

on resize: green body of page changing size - not wanted.
but i do need to keep the green. so i assumed i needed to somehow make the slice duplicate to fill the gap created.

that make more sense ? :D

[drhowarddrfine]

No because, on a larger screen, there's a gap between your left image on the left side so it doesn't look correct so we're seeing two different things but I think I know what you're trying to do now. Gotta run for the moment.

There's an easy CSS3 fix for this but it only works in modern browsers, not IE.

[drhowarddrfine]

The solution is similar to a "sliding door effect". You can Google for that. It's essentially for tabbed navigation but you'll see how it's the same as what you're trying to do. I tried from memory but keep getting interrupted and a little bit of image editing needs to be done.

[mrjoz]

i must be more of an expert than i thought. problem solved thanx....to me ;) lol