SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Body background image, full height, responsive

    Hi, I want to be able to get a background image go down to the bottom of the browser window, even when there isn't any content on the page.

    I want the background image to behave exactly as the one here does: http://robcubbon.com/dev/ongala/home-6.html the height of the image is 100% the height of the browser window and the width covers the 100% of the browser window and crops off the sides if necessary.

    I have tried to recreate this here: http://ongala.co.uk/ and have copied the CSS line for line (I think) but I can't get the same covering of the browser window to happen.

    What am I doing wrong?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Personally, I would place that background image on the body element itself. Seems much neater that way to me, rather than relying on an inner div. Something like this:

    Code:
    html, body{height:100%;}
    
    body {
    background: url(images/bg7.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    }
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Ralph, thanks again. You helped me out with a MAMP issue the other day! Thanks a lot. If you ever need anything from me please don't hesitate to ask!!!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,112
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Glad that helped, and thanks for the offer. There are probably better solutions (for example, ones that work in older browsers too), but this seems to work OK in modern browsers. Paul just posted a nice demo here of a solution that works in IE8 too: http://www.sitepoint.com/forums/show...=1#post5374942
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Great, thanks for that (I've follow you on G+ and Twitter)

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    210 Post(s)
    Tagged
    12 Thread(s)
    I'm probably going to get myself shot for this, but there is also a nice jQuery plugin to do this.
    This basically allows you to add a dynamically-resized, slideshow-capable background image to any page or element (so you can also achieve the fade in effect of the page you link to).

    I used it to make a demo for someone in the JavaScript forum recently.
    You can check it out here (try clicking on some of the links to see the background image change).

    Don't know if this helps much, but I thought I'd chuck it out there anyway.

  7. #7
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Pretty cool, Pullo, thanks!

  8. #8
    SitePoint Member
    Join Date
    Mar 2013
    Location
    Cebu City , Philippines
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If want to have a full size image ,, create or download the bigger sizes of it . because if you choose small images when resized it will appeared pixilized . not like the bigger once .

  9. #9
    SitePoint Zealot robcub's Avatar
    Join Date
    May 2008
    Location
    London, England
    Posts
    135
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I'm using 1600 x 1100 px – thank you, Jason

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Better to place it on the html. Here is a itty bitty tut I did on this the other day http://www.websitecodetutorials.com/...ound-image.php


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
  •