SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict
    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.

  2. #2
    SitePoint Addict
    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.

  3. #3
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'll make a quick mock-up image to clarify what I mean...

  5. #5
    Getting there... Willigogs's Avatar
    Join Date
    Aug 2003
    Location
    UK
    Posts
    394
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here you go. Hopefully this will make it clear...

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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    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

  7. #7
    SitePoint Addict
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •