Results 1 to 5 of 5
  1. #1
    New Lounger
    Join Date
    Aug 2009
    Location
    Booneville, Arkansas, USA
    Posts
    12
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm having problems designing images used as backgrounds to fit the 21" - 25" monitors.

    When most screen resolutions were in the 800x600 or 1024x768 range, I never noticed any problems with the default tiling properties, but now the larger screens are repeating my 1024 x 768 images both horizontally and vertically. This becomes a difficulty, especially when I do any image-mapping with links.

    How can I get a "universal" size that fits all monitors? This has become a critical issue for me with a couple of new clients' web sites, and I would appreciate an emailed answer in addition to whatever interest this might generate in the Lounge.

  2. #2
    Super Moderator BATcher's Avatar
    Join Date
    Feb 2008
    Location
    A cultural area in SW England
    Posts
    3,421
    Thanks
    33
    Thanked 195 Times in 175 Posts
    The simple answer is that you can't, since the common screen formats are 16:10 or 16:9 whereas they used to be (more or less) 4:3.
    Have a look at this Wikipedia article on Display Resolution

    You might find it useful (XP procedure) to right click on a blank area of desktop, and choose Properties. Select the Desktop tab and choose one of the pictures. Then observe the effect when you choose each of the three possible Positions: Center, Tile or Stretch. That's what can get done to your carefully-crafted picture...
    BATcher

    Time prevents everything happening all at once...

  3. #3
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts
    Quote Originally Posted by deacon37 View Post
    I'm having problems designing images used as backgrounds to fit the 21" - 25" monitors.

    When most screen resolutions were in the 800x600 or 1024x768 range, I never noticed any problems with the default tiling properties, but now the larger screens are repeating my 1024 x 768 images both horizontally and vertically. This becomes a difficulty, especially when I do any image-mapping with links.

    How can I get a "universal" size that fits all monitors?
    The CSS specification is being revised to add background image scaling, but this is not yet implemented across the popular browsers.

    References:
    CSS3: http://www.w3.org/TR/css3-background...ackground-size
    Mozilla: https://developer.mozilla.org/en/CSS...ackground-size

    Until then, I think you are a bit stuck using fixed size images on a complementary background color.

  4. #4
    New Lounger
    Join Date
    May 2010
    Location
    Limburg, Netherlands
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    There's another problem with using background images that large: download time and bandwidth usage. A work-around for that can be found in html5 Canvas: program the background image as a javascript procedure. Quick, small in download size, and works in most browsers. Drawback: requires javascript.

  5. #5
    Star Lounger
    Join Date
    Dec 2009
    Location
    Finland
    Posts
    56
    Thanks
    1
    Thanked 1 Time in 1 Post
    If you want to stop the background image from tiling you can use "no-repeat" property in your background style. That is, if you use css in your design. Also, with repeat-x or repeat-y you can control your background horizontal or vertical tiling respectively.

    So far this too is just another workaround until the newer html5 specifications spread a bit wider.

Posting Permissions

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