Fairly complex background image problem

[hockeykid]

Hi all,

The page in question.

It ideally will look like this.

I would like the truck image with "Your Message On The Move" on it to overlap the content div so it doesn't look so flat.

The way I see this happening is to make one half a background image in #content and the back end a background image in another div floating alongside the content div.

An issue is that I would like the truck to always be vertically centered in the content div (#content).

I know I could float a div alongside the content div, absolutely position it to start at the top of the content div, and then add the backend of my truck as a background image, but the height wouldn't match up with #content so it wouldn't work.

I hope I haven't been too confusing. If anyone understands, do you have any thoughts on how I could go about acheiving this?

Thanks in advance.

[hockeykid]

No takers? Let me try to more accurately describe what I'm after.

How can I make the truck appear vertically centered in #content while still making it look dynamic (with one half outside of #content)?

Thanks in advance for any advice anyone could throw my way.

[Willigogs]

Just thinking off the top of my head - the first idea that comes to me would be to create a container or wrapper div which would include your #content div floated left, leaving a big enough space on the right to include the back half of the truck image?

In theory, the wrapper div will always expand to be the same height of the #content div inside it? Therefore you could have the front half of the truck as the #content background, and then the back half as the container/wrapper background (positioned to the right).

Does that make sense?

[Willigogs]

I'll make a quick mock-up image to clarify what I mean...

[Willigogs]

Here you go. Hopefully this will make it clear...

(If image is not available it will be awaiting moderator's approval)

[Paul O'B]

Hi,

Willigogs drawing should work but it may take some matching up although you should be able to keep it vertically centred using center in the background position property.

You could also do something simpler like this which just places the image absolutely as a single image. The image is kept vertically centred by top:50% and margin-top:- (half the elements height).

http://www.pmob.co.uk/temp/truck.htm

Hope it helps anyway

[hockeykid]

Thanks a bunch guys, it's worked out now.