Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

HTML - Page Background Image That Fits All Resolutions

Posted on 2014-01-09
9
Medium Priority
?
665 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
9 Comments
 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1500 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 500 total points
ID: 39801807
0
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
LVL 54

Assisted Solution

by:Scott Fell, EE MVE
Scott Fell,  EE MVE earned 1500 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1500 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

604 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