SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how to display the full page regardless of the browser size

    Hi All,

    I am building a simple page displaying an image in the background. When I resize my browser or click on 'restore down', the page and image is cut (not showing in full).

    I would like the entire full page to appear regardless of how the browser is re-sized.

    Does my question make sense?

    p.s. my background image size is 700x500, could this be the reason?

    here is my code:


    HTML Code:
    <html>
    <head>
    	
    	<title><?php echo $page_name;?> home page</title>
    	
    
    </head>
    
    
    <body bgcolor="#000000" style="background-image:url(new.jpg); background-repeat:no-repeat;"> 
    
    
    
    </body>
    
    
    </html>

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, for starters you don't have a DOCTYPE, which is going to put your page into quirks mode (basically the old way of doing things - which when CSS gets involved, just means you're literally inviting disaster).

    You also don't have a height on the body, which means the height of the document is going to be equal to the amount of content contained in the body; in this case that will be zero.

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi.

    I think you are asking for a minimum width solution?
    In the example below if the window is smaller than 700px the bottom scroll bar will appear.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title><?php echo $page_name;?>home page</title>
    <style type="text/css">
    <!--
    body {
    	background: #000 url(new.jpg) no-repeat top left;
    	min-width: 700px;
    }
    -->
    </style>
    <!--[if gte IE 5]><style type="text/css">body {width:expression( documentElement.clientWidth < 700 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 700 ? "700" : "auto") : "700px") : "auto" );}</style><![endif]-->
    </head>
    <body>
    <p>Content</p>
    </body>
    </html>


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
  •