?
Solved

HTML - Page Background Image That Fits All Resolutions

Posted on 2014-01-09
9
Medium Priority
?
661 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 53

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
WordPress Tutorial 2: Terminology

An important part of learning any new piece of software is understanding the terminology it uses. Thankfully WordPress uses fairly simple names for everything that make it easy to start using the software.

 
LVL 53

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 53

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

WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will learn how to count occurrences of each item in an array.
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses

770 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