Solved

HTML - Page Background Image That Fits All Resolutions

Posted on 2014-01-09
9
619 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
 
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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

759 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now