SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image background

    I just received this psd image, which I have to convert in to HTML. I am having problems with the background image at the bottom of the page. When using a full screen background image I know how to handle it but have no idea what properties to use for this image that should start at 400px from the top but should extend until the bottom of the page (100% height)! Any suggestions would be highly appreciated.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    That's tricky, and I'd suggest an alternative. IMHO, having the background extend below the footer like that if really fugly and looks unprofessional. Personally, I prefer the footer background to fill any remaining space at the bottom of the page, so I set the body background color as the footer color, so that there's never a gap at the bottom. That way, you also get out of this problem. With this setup, you can then set the background image on the content area and use background-size: cover.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph, thank you for you reply!

    IMHO, having the background extend below the footer like that if really fugly and looks unprofessional.
    That are my thoughts as well so I will try to get the designer to other thoughts
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Ralph. I have to come back to you about this one. I've got the designer so far that he agreed that the background image is not extending below the footer any longer! So I can indeed use background-size: cover. property. But now I am facing the following problems. first of all how do I get the image underneath the white content. Right now I have the white content as a background on the wrapper but that isn't working at all (the photo is going over the white background and In the example I have just some text, but there will be probably pages (for example gallery page) that will have more content. How can I make that background image grow along with the actual content on the white background? The second problem i have is with the

    Thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It would be better if you could post an actual live example to show where you are up to.


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
  •