SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Varying the size of a background image

    Hi,

    I have a site where all the pages are unfortunately different lengths. My background image is a gradient, and I originally just used a long version of the image to cover all eventualities. It's now been pointed out, however, that this producers a scroll bar on the shorter pages, which makes viewers expect to find something at the bottom of the page. I therefore want to set the height of each page's background image individually.

    I know I can do this by creating a different Photoshop image for each page, but this seems hugely time-consuming. I was hoping there would be some code by which I can dictate a cut-off point for the background image, but haven't found one. I obviously don't want to just shrink the image, as this wouldn't work in the transition between pages.

    Any advice would be appreciated please!

    Thanks
    B

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    The best thing to do is have a background color on the body and have the gradient as a background image on the body element. Let the gradient image fade into the background color. A background image won't cause scroll bars, no matter how tall, so it's up to you at what point the gradient fades into the bg color.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Brilliant!

    So clever. thanks everso. Will give it a try!

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2010
    Posts
    44
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I tried that and was really happy with the result... until today! I've just looked at the site on a iPad, and on there the gradient repeats vertically. Which looks naff. My code is as follows: body {
    font-family: Verdana, Geneva, sans-serif;
    color: #333;
    font-size: 14px;
    background-color:#9dae87;
    line-height: 150%;
    background-repeat: repeat-x;
    background-image: url(images/2gb4.jpg);}

    I had thought that the repeat-x meant that it would not repeat horizontally, but just vertically?

    Am I doing something really daft (again) or do iPads not have this facility? I was using Safari, but I'm afraid I'm not sure which version. Browserlab showed it working fine in Safari 5.1 OS-X

    The site can be seen at http://www.gillwykes.com/development/jwa/ but of course it looks as if it's working perfectly if not viewed on an iPad.


    Thanks for your help, and patience with my newbie questions! I'm longing to be able to help other people on here in return!

  5. #5
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Hmm, I'd like to know the answer to this, also. I had no idea that it would display so differently on an iPad.


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
  •