SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
-
Jun 9, 2005, 13:46 #1
- Join Date
- Jun 2003
- Location
- Barrie, Ontario, Canada
- Posts
- 316
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Fairly complex background image problem
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.
-
Jun 14, 2005, 13:19 #2
- Join Date
- Jun 2003
- Location
- Barrie, Ontario, Canada
- Posts
- 316
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
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.
-
Jun 15, 2005, 08:23 #3
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?
-
Jun 15, 2005, 08:24 #4
I'll make a quick mock-up image to clarify what I mean...
-
Jun 15, 2005, 08:31 #5
Here you go. Hopefully this will make it clear...
(If image is not available it will be awaiting moderator's approval)
-
Jun 15, 2005, 08:56 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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
-
Jun 15, 2005, 12:42 #7
- Join Date
- Jun 2003
- Location
- Barrie, Ontario, Canada
- Posts
- 316
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks a bunch guys, it's worked out now.
Bookmarks