Full page background image

Discussion in 'CSS' started by le007, Oct 3, 2012.

  1. #1
    Hi,

    I wish to have my background image expand to all resolutions (which it is doing) but I want to have a min-width on it of 900px so that it doesn't go any smaller than that even if the user makes their browser 2 inches high/wide.

    This is working for one page but not working for another (similar image sizes for both pages) - very frustrating, please help:

    
    <body>
    
    <style type="text/css">
    <!--
    .fon_img {
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
    	min-width: 900px;
    
    
    
    }
    
    
    .content {
    width:expression(document.body.clientWidth < 900? "900px": "auto" );
    left: 0;
    min-width: 900px;
    position: absolute;
    top: 0;
    width: 100%;
      z-index: 5;
    }
    
    -->
    </style>
    
    <img id="fon_img" class="fon_img" src="bridge1.jpg" />
    
    <div class="content">
    
    Code (markup):
    Resolved - it's working now. This code is quite useful if you would like to use it.
     
    Last edited: Oct 3, 2012
    le007, Oct 3, 2012 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    1) any image that looks good enough to do that at anything over 800x600 is probably too large to belong on a website in the first place.

    2) background images are presentational, and as such have ZERO business in the HTML as a IMG tag... particularly given what this would do when CSS is disabled.

    3) postion:fixed is unreliable cross-browser.

    4) that expression would fire on every resize, making IE suck on the CPU like a chocolate covered...

    5) on real doctypes STYLE as a tag is invalid in BODY.

    Reeks of one of those "but I can do it in photoshop" website ideas, which 99% of the time means it has no business on a website. But again, this is why the number of successful websites that pull these types of stunts can be counted on no fingers.
     
    deathshadow, Oct 3, 2012 IP