Background Image Width Problem

Discussion in 'CSS' started by yuknodoit, Jul 31, 2008.

0
  1. #1
    www.lizardinternet.com/nrs

    The problem is that anytime there is a scroll box (on resolutions 800x600 for example, or restore the screen down into a box so that you have to scroll along) the background image does not strech to 100% as it is supposed to (look under the menu and the footer).

    Does anyone know how to fix this problem? Any help would be much appreciated.
     
    yuknodoit, Jul 31, 2008 IP
  2. BlueDevil

    BlueDevil Peon

    Messages:
    19
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Don't worry, there's a simple fix. Just add:
    min-width:900px;
    Code (markup):
    to #layout, #image and #image2

    However, this won't fix it for IE6. I hope that helps.
     
    BlueDevil, Jul 31, 2008 IP
    albionsaryazdi likes this.
  3. yuknodoit

    yuknodoit Well-Known Member

    Messages:
    469
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    130
    #3
    Thanks very much, worked a treat. :)

    If anyone knows how to fix this for IE6 let me know.
     
    yuknodoit, Jul 31, 2008 IP
  4. glorie

    glorie Peon

    Messages:
    123
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #4
    try 

    
min-height:900px;
height: auto !important;
height:900px;
    Code (markup):
     
    glorie, Jul 31, 2008 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Wait, is it width or height?

    For min-width for IE6, you have two options:

    You can use a Javascript-for-ie6-only in your CSS. You'll have to comment it out when you send you CSS to the validator cause, I dunno I've regularly crashed the validator trying to send it : ) It's not valid, but it's written for the only browser that can see it-- it has no effect on IE7 (or8) nor any of the modern browsers, so it is safe to use.

    On the things which have the min-width:
    
* html #layout, * html #image, * html #image2{
  width: 900px;
  width: expression((document.body.clientWidth>900) ? "2000px" : ((document.body.clientWidth>900) ? "auto" : "900px"));
}
    Code (markup):
    the "width: 900px;" in the first line is what will happen to IE users without JS. The first number in the expression is a max-wdith; sorry I dunno how to do this with ONLY min-width, so if you use this there has to be a max-width sorry (I'm no javascripter). The second number is your miun-width. The body.clientWidth is the width of the browser window actually so you may want to change those numbers to work better.

    The second technique involves no Javascript, but an extra container is needed, given a "border" as wide as your min-width, and then your current container is floated and pulled back over the "border"... extremely bizaar and clever trick from Paul O'Brien...
    http://www.pmob.co.uk/temp/min-width-ie.htm

    If you are allergic to JS or maybe have a substantial of Javascript-crippled IE6 and below users, then the second technique may be worth the extra container.
     
    Stomme poes, Aug 1, 2008 IP