SOTI Pulse Logo

Lockdown Background Image SIze - Automatic adjustment

Solved Locked
BW
Benjamin, Wilts
Taneri Consulting GmbH (TCG Global)

Hi,

is there any possibility to automatically adjust the background picture to the correct size of the device or the correct zoom factor the user is using? Most of the users are using with a "smaller zoom" than the standard display is showing.

See the following picture as an example. The third picture (right) shows the problem. Is there any way to adjust this automatically?

Lockdown Script is as follows

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Android/Desktop Lockdown</title>
<style type="text/css">
<img src="<MCImg_Honeywell_Hintergrund.jpg>" />
<img src="<MCImg_Footer.jpg>" />

html, body { height: 99.3%; }

body {
    margin: 4px 4px 0px 4px;
    background-image: url("<MCImg_Honeywell_Hintergrund.jpg>");
        backround-position: center;
        backround-size: auto 100% !important;
}

#wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}
<!--
#Header {
    background: url('<MCImg_BkgHeaderRepeat.png>') repeat-x;
    height: 65px;
    width: 355px;
}

#Header .lockicon {
    background: url('<MCImg_HeaderLock.png>') no-repeat;
    width: 69px;
    height: 65px;
    float: left;
    position: absolute;
}

#Header .Title {
    font: bold 30px arial,sans-serif;
    text-align: center;    
    line-height: 65px;
    color: #fff;
    margin-left: 69px;
    display:block;
}
-->
#Main {
    text-align:center;
    margin: 4px 0 100px;
}

#Main .row {
    display:table;
    white-space:nowrap;
    margin: 0px auto;
}

#Main .row ul {
    list-style: none;
    margin:0;
    padding:0;
    display: table-row;
    white-space:nowrap;
}

#Main .row ul br {clear: both;}

#Main .row ul li {
    width: 80px;
    height: 100px;
    padding: 2px;
    /* border: 2px #666666 solid; */
    margin: 2px 4px 2px 0px;
    vertical-align: middle;
    text-align: center;
    position: relative;
    display:table-cell;
    float:left
}

#Main .row ul li img {
    border: 0;
    width: 48px;
    height: 48px;
    padding: 2px;
}

#Main .row ul li .txt {
    color: #FFFFFF;
    font: bold 12px arial,sans-serif;
}

#Footer {
    font: bold 30px arial,sans-serif;
    color: #fff;
    position:fixed;
    bottom:0;
    margin:0;
    padding:0;
    width:100%;
    height: 57px;
}
/* IE7+ fix */
html > body #Footer {
    margin:0 0 0 -4px;
    padding:0 4px;
}

#Footer .FooterContainer {
    margin:0;
    display:block;
    overflow:hidden;
    height: 57px;
    line-height: 57px;
    background: url('<MCImg_BkgFooterRepeat.jpg>') repeat-x;    
}
/* IE7+ fix */
html > body #Footer .FooterContainer {
    margin:0 8px 0 0;
}

#Footer .FooterContainer .FooterBg {
    background: url('<MCImg_Footer.jpg>') no-repeat;
    width: 426px;
    height: 57px;
    float: none;
}

#Footer, .push {
    height: 2em;
    height: 57px \0/;
}


</style>

<!--[if lt IE 8]>
<style type="text/css">
#Main .row ul {display:inline-block;}
#Main .row ul{display:inline; }
#Main .row ul li{display:inline-block}
#Main .row ul li{ display:inline;}
#Main .row ul a{ display:inline-block;}
#Main{text-align:center}
</style>
<![endif]-->

</head>

<body>

<div id="wrapper">
<!--
    <div id="Header">
        <div class="lockicon"></div>
        <span class="Title">OTTO DÖRNER</span>
    </div>
-->
    <div id="Main">
        <div class="row">
            <ul>
                <!-- To display the image for the item rather than use the EXE icon use this line instead
                <li><A href ="<MCLink0>"><img src="<MCDispImg0>" /><div class="txt"><MCDISP0></div></a></li>-->
                <li><A href ="<MCLink0>"><img src="<MCExeIcon0>" onerror="this.style.display='none'" /><div class="txt"><MCDISP0></div></a></li>
                <li><A href ="<MCLink1>"><img src="<MCExeIcon1>" onerror="this.style.display='none'" /><div class="txt"><MCDISP1></div></a></li>
                <li><A href ="<MCLink2>"><img src="<MCExeIcon2>" onerror="this.style.display='none'" /><div class="txt"><MCDISP2></div></a></li>
                <li><A href ="<MCLink3>"><img src="<MCExeIcon3>" onerror="this.style.display='none'" /><div class="txt"><MCDISP3></div></a></li>
                <li><A href ="<MCLink4>"><img src="<MCExeIcon4>" onerror="this.style.display='none'" /><div class="txt"><MCDISP4></div></a></li>
                <li><A href ="<MCLink5>"><img src="<MCExeIcon5>" onerror="this.style.display='none'" /><div class="txt"><MCDISP5></div></a></li>
                <li><A href ="<MCLink6>"><img src="<MCExeIcon6>" onerror="this.style.display='none'" /><div class="txt"><MCDISP6></div></a></li>
                <li><A href ="<MCLink7>"><img src="<MCExeIcon7>" onerror="this.style.display='none'" /><div class="txt"><MCDISP7></div></a></li>
                <li><A href ="<MCLink8>"><img src="<MCExeIcon8>" onerror="this.style.display='none'" /><div class="txt"><MCDISP8></div></a></li>
                <li><A href ="<MCLink9>"><img src="<MCExeIcon9>" onerror="this.style.display='none'" /><div class="txt"><MCDISP9></div></a></li>
                <li><A href ="<MCLink10>"><img src="<MCExeIcon10>" onerror="this.style.display='none'" /><div class="txt"><MCDISP10></div></a></li>
                <li><A href ="<MCLink11>"><img src="<MCExeIcon11>" onerror="this.style.display='none'" /><div class="txt"><MCDISP11></div></a></li>
                <li><A href ="<MCLink12>"><img src="<MCExeIcon12>" onerror="this.style.display='none'" /><div class="txt"><MCDISP12></div></a></li>
                <li><A href ="<MCLink13>"><img src="<MCExeIcon13>" onerror="this.style.display='none'" /><div class="txt"><MCDISP13></div></a></li>
                <li><A href ="<MCLink14>"><img src="<MCExeIcon14>" onerror="this.style.display='none'" /><div class="txt"><MCDISP14></div></a></li>

            </ul>
        </div>
    </div>
    <div class="push"></div>
</div>
<div id="Footer">
    <div class="FooterContainer">
        <div class="FooterBg"></div>
    </div>
</div>
</body>
</html>

Thanks very much for your help and ideas.

Greetings

4 years ago
Android
ANSWERS
RC
Raymond Chan Diamond Contributor
4 years ago (edited 4 years ago)

I often define the background image using other way a little different from yours.  Anyway, a quick  browse through your html codes, it seems that there are some typos with missing letter g for two instances of the word "background".  Maybe you should fix them first and see if everything's OK.   Frankly, I myself haven't tried doing any test with your template, and thus couldn't rule out whether there is any other problem.

Solution
BW
Benjamin, Wilts
4 years ago

Thanks Raymond,

I didn't see the typo.

Will give that a try and let you know.

BW
Benjamin, Wilts
4 years ago

Hi Raymond,

the background image size works fine now.

Nevertheless the footer (as you can see on the third picture) is not acting correctly.

Is there any way to define the footer so it gets "sized" automatically?

RC
Raymond Chan Diamond Contributor
4 years ago (edited 4 years ago)

You should be able fill the hole on the right of the footer simply by changing one word in the Footer Container definition in your template  as follows:

#Footer .FooterContainer .FooterBg {
background: url('<MCImg_poweredbysoti.jpg>') no-repeat;
width: 426px;
height: 57px;
float: right;
}

Again, I haven't done any actual test with your template to confirm, nor an I a web programmer.  I've only spent two minutes to quickly visually browse some sections of your codes and make an educated guess.  

BW
Benjamin, Wilts
4 years ago

Done that, <"float- right"

but, it doesn't change the behaviour on the device.

RC
Raymond Chan Diamond Contributor
4 years ago (edited 4 years ago)

I don't know if you have any typo again either in your post or in your html code.  Just in case, it's 

  float: right;

With a colon after the word "float", not a hyphen. And there is a semi-colon after the word "right".  

Similar Discussions