HTML - Page Background Image That Fits All Resolutions

Hi Experts,

I have an html table that holds a bg image of a fixed size image that is huge in order to cover all pages’ resolutions. I don’t want a page that shows a white space in the bg that’s why I have this bg image with this size.

However, when I added this bg image, it showed me scroll bars since the image height is off the screen. So I added some css to avoid the scroll bars caused by this image.

Now, I have a bigger problem which is whenever I have a grid that shows big number of records the page doesn’t show the rest of the rows because the scrollbars are hidden!

How do I solve this problem? I want to have a bg image on my page that fits all resolutions, and at the same time I want to show scrollbars for the pages that need scrollbars!

Please help!
Thanks
feesuAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott FellDeveloper & EE ModeratorCommented:
Do you mean like this? http://buildinternet.com/project/supersized/

Are you using the table for your layout?

I think we need to take a look at your code and make some suggestions for you.  Can you post a link to your page?
feesuAuthor Commented:
Hi Scott,

I don't have a live website, what I have is under development.

It is an ASP.NET website that loads user controls inside the main aspx at runtime.

There is a main html table on the homepage that has the bg image. Inside this table, there is another table called tbl_4_panes that loads the user controls at runtime.

Loades user controls are my content that depending on its size a scroll bar will show.

The scroll bar shows usually automatically by the page, but after disabling it in order to have the bg image fit different resolutions, I need to find a solution that accommodates the content.

I am attaching the markup for the aspx.  
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" MaintainScrollPositionOnPostback="true" %>

<%@ Register src="DesktopPortalBanner.ascx" tagname="DesktopPortalBanner" tagprefix="uc1" %>
<%@ Register src="DesktopPortalFooter.ascx" tagname="DesktopPortalFooter" tagprefix="uc2" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<meta http-equiv="refresh" content="<%= RefreshInterval%>">

    <link href="images/icon.ico" rel="shortcut icon" />
    <link rel="shortcut icon" type="image/gif" href="images/icon.gif" />    

    <link href="Styles_E.css" rel="stylesheet" type="text/css" />
    
    <link href="Skins/EJ_ThisSite/Grid.EJ_ThisSite.css"   rel="stylesheet" type="text/css" />
    <link href="Skins/EJ_ThisSite/Grid.EJ_ThisSite_Custom.css"   rel="stylesheet" type="text/css" />
    <link href="Skins/EJ_ThisSite/Grid.EJ_ThisSite_gridlines.css" rel="stylesheet" type="text/css" />
    
    <link href="Skins/EJ_ThisSite/Menu.EJ_ThisSite.css"   rel="stylesheet" type="text/css" />
    <link href="Skins/EJ_ThisSite/Menu.EJ_ThisSite_Footer.css" rel="stylesheet" type="text/css" />
    
    <link rel="stylesheet" type="text/css" href="Skins/Window.css"/>
    <link rel="stylesheet" type="text/css" href="Skins/EJ_Vista/Window.EJ_Vista.css" />

    <link href="Skins/EJ_ThisSite/Calendar.EJ_ThisSite.css" rel="stylesheet" type="text/css" />
    <link href="Skins/EJ_ThisSite/ComboBox.EJ_ThisSite.css" rel="stylesheet" type="text/css" />
    
    <link href="Skins/EJ_ThisSite/ToolBar.EJ_ThisSite.css" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
        html, body {overflow: hidden;}  /*No Scrollbars */
        .tblLayout {
            position:fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }


    </style>
    
</head>
<body leftmargin="0px;" rightmargin="0px;">
    <form id="form1" runat="server">
   
    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
     
        <Scripts>                                    
            <asp:ScriptReference Path="jquery-1.4.2.js" />                  
        </Scripts>
             
    </telerik:RadScriptManager>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" 
        DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    </telerik:RadAjaxManager>

       <script type="text/javascript">
       
           var images = new Array();
           images[0] = "desktopModules/test/aboutus.jpg";
           images[1] = "desktopModules/test/investorrelations.jpg";
           images[2] = "desktopModules/test/products.jpg";
           images[3] = "desktopModules/test/responsibility.jpg";
           images[4] = "desktopModules/test/subsidiaries.jpg";
           images[5] = "desktopModules/test/home.jpg";
           window.onload = function showDelay() {
               setInterval("changeBg()", 5000);
           }
           var i = 0;
           //function for dynamically switching the background image
           function changeBg(divId) {
               if (i == 6) {
                   i = 0;
               }
               document.getElementById('footer').style.backgroundImage = 'url(' + images[i] + ')';
               i++;
               //alert('url(' + images[i] + ')');
           }

           var body = document.body;
           var docElem = document.documentElement;
           var bodyScrollTop = 0;
           var bodyScrollLeft = 0;
           var docElemScrollTop = 0;
           var docElemScrollLeft = 0;
           function OnClientBeforeClose(sender, args) {
               bodyScrollTop = body.scrollTop;
               bodyScrollLeft = body.scrollLeft;
               docElemScrollTop = docElem.scrollTop;
               docElemScrollLeft = docElem.scrollLeft;
           }
           function OnClientClose() {
               setTimeout(function() {
                   body.scrollTop = bodyScrollTop;
                   body.scrollLeft = bodyScrollLeft;
                   docElem.scrollTop = docElemScrollTop;
                   docElem.scrollLeft = docElemScrollLeft;
               }, 30);
           }

       
            function f() 
            { 
            //code 
            Sys.Application.remove_load(f); 
            } 
            Sys.Application.add_load(f); 
        </script>

    <div id="div_loadingPanel" 
        class="loadingPanel_float loadingPanel_top loadingPanel_right">
                        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" 
                            IsSticky="True" MinDisplayTime="500" Transparency="10">
                            <table ID="tbl_loadingImage" border="0" cellpadding="10" cellspacing="10" 
                                class="loadingPanel" height="60" width="100%">
                                <tr>
                                    <td ID="td_loadingImage" align="center">
                                        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loading3.gif" />
                                    </td>
                                </tr>
                            </table>
                        </telerik:RadAjaxLoadingPanel>
    </div>

     <table id="tbl_0_toCenter" border="0" bordercolor="Red" cellpadding="0" 
        cellspacing="0" style="width:100%;">
         <tr>
             <td align="center" valign="top">
   
    <table id="tbl_1_banners" border="0" bordercolor="#33CC33" 
        cellpadding="0" cellspacing="0" width="100%">
        <tr>
            <td id="topBanner" runat="server" colspan="3" visible="false">
                &nbsp;</td>
        </tr>
        <tr>
            <td id="leftBanner" runat="server" visible="False">
                </td>
            <td id="contentPane1" runat="server" >
   



                <table id="tbl_2_frame" border="0" bordercolor="Fuchsia" cellpadding="0" 
                    cellspacing="0" width="100%">
                    <tr>
                        <td align="left" valign="top">
                            <div id="footer" style="width:1920px; height:1080px; background-image: url('desktopModules/test/Home.jpg'); background-repeat: no-repeat; background-attachment: fixed;" >
                                <table id="tbl_3_container" border="0" bordercolor="Green" class="tblLayout"
                                    cellpadding="0" cellspacing="0" width="100%">
                                    <tr>
                                        <td id="td_containerHeader" runat="server">
                                            <uc1:DesktopPortalBanner ID="DesktopPortalBanner1" runat="server" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td id="td_containerBody" runat="server" 
                                            valign="top" height="100%">

                                <table style="width:100%;" id="tbl_4_panes" border="0" bordercolor="Blue" 
                                    cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td id="topPane" runat="server" colspan="4" visible="false">
                                            &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td id="leftPane" runat="server" valign="top" visible="false">
                                            &nbsp;</td>
                                        <td id="contentLeftPane" runat="server" valign="top" visible="false">
                                            &nbsp;</td>
                                        <td id="contentRightPane" runat="server" valign="top" visible="false">
                                            &nbsp;</td>
                                        <td id="rightPane" runat="server" valign="top" visible="false">
                                            &nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td id="bottomPane" runat="server" colspan="4">
                                            &nbsp;</td>
                                    </tr>
                                </table>

                                        </td>
                                    </tr>
                                    <tr>
                                        <td id="td_containerFooter" runat="server" valign="bottom">
                                            <uc2:DesktopPortalFooter ID="DesktopPortalFooter1" runat="server" />
                                        </td>
                                    </tr>
                                    </table>
                            </div>        
                        </td>
                    </tr>
                </table>
    



            </td>
            <td id="rightBanner" runat="server" visible="False">
                &nbsp;</td>
        </tr>
        <tr>
            <td id="bottomBanner" runat="server" colspan="3" visible="False">
                &nbsp;</td>
        </tr>
        </table>

             </td>
         </tr>
    </table>

     </form>

       </body>
</html>

Open in new window

Alex EneCommented:
Get Blueprints for Increased Customer Retention

The IT Service Excellence Tool Kit has best practices to keep your clients happy and business booming. Inside, you’ll find everything you need to increase client satisfaction and retention, become more competitive, and increase your overall success.

Scott FellDeveloper & EE ModeratorCommented:
We are only concerned with the front end at this time - what you see in the browser.  So the asp code does not mean anything.  Just post your page to public folder and let us know the link  in order to see what you are doing.

If you are using tables for your full layout, you are going to run into issue any way.

If you want to have a background image that conforms to any browser height and width, please have a look at that supersized link I gave you.

It does not have to be a slide show, just one image.
feesuAuthor Commented:
Scott,

I don't have my website live yet, so I cannot show you a link.
Scott FellDeveloper & EE ModeratorCommented:
>I don't have my website live yet, so I cannot show you a link.
The best thing is to render your page locally, save the rendered html and send it up as a test page to your public server.  Or recreate a test page with just the parts that are important.  Otherwise, it is just a guess.
Here is how you can fill up the page with an image and it will stretch to any browser size.  http://jsbin.com/padasQ_28334238/1/edit  The image is 450 X 281 so not very large.
The only code is the css.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>padas</title>
    <style>
      body {
background:url('http://cache.desktopnexus.com/thumbnails/1230978-bigthumbnail.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

    </style>
  </head>
  <body>
  
  </body>
</html>

Open in new window


Using a table over the body background http://jsbin.com/padasQ_28334238/2/
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>padas</title>
    <style>
      body {
background:url('http://cache.desktopnexus.com/thumbnails/1230978-bigthumbnail.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
      table{
        margin-left:auto;
        margin-right:auto;
        margin-top:30%;
        width:90%;
        padding:10px;
        background-color:rgba(255,0,0,0.5);
      }
      table td{
        padding:5px;
        border-style:solid;
        border-width:thin;
      }
    </style>
  </head>
  <body>
  <table>
    <tr>
      <td>one</td><td>two</td><td>three</td><td>four</td>
    </tr>
    <tr>
      <td>one</td><td>two</td><td>three</td><td>four</td>
    </tr>
    <tr>
      <td>one</td><td>two</td><td>three</td><td>four</td>
    </tr>
    </table>
  </body>
</html>
  

Open in new window

Using the background image attached to the table http://jsbin.com/padasQ_28334238/3/
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>padas</title>
    <style>
      body{background-color:black;}
      table {
background:url('http://cache.desktopnexus.com/thumbnails/1230978-bigthumbnail.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
      table{
        width:100%;
        height:500px;
        padding:10px;
        border-style:solid;
        border-width:thick;
      }
      table td{
        padding:5px;
        border-style:solid;
        border-width:thin;
        background-color:rgba(255,0,0,0.5)
      }
    </style>
  </head>
  <body>
  <table>
    <tr>
      <td>one</td><td>two</td><td>three</td><td>four</td>
    </tr>
    <tr>
      <td>one</td><td>two</td><td>three</td><td>four</td>
    </tr>
    <tr>
      <td>one</td><td>two</td><td>three</td><td>four</td>
    </tr>
    </table>
  </body>
</html>

Open in new window



Do any of these examples help?

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
feesuAuthor Commented:
I'm gonna try them out. Thanks a lot.
GaryCommented:
I've requested that this question be closed as follows:

Accepted answer: 500 points for padas's comment #a39855582

for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.