Solved

HTML - Page Background Image That Fits All Resolutions

Posted on 2014-01-09
9
638 Views
Last Modified: 2014-03-12
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
0
Comment
Question by:feesu
9 Comments
 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 375 total points
ID: 39767852
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?
0
 

Author Comment

by:feesu
ID: 39769832
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

0
 
LVL 5

Assisted Solution

by:Alex Ene
Alex Ene earned 125 total points
ID: 39801807
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 52

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 375 total points
ID: 39801863
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.
0
 

Author Comment

by:feesu
ID: 39855482
Scott,

I don't have my website live yet, so I cannot show you a link.
0
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 375 total points
ID: 39855582
>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?
0
 

Author Comment

by:feesu
ID: 39859883
I'm gonna try them out. Thanks a lot.
0
 
LVL 58

Expert Comment

by:Gary
ID: 39922968
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.
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question