Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Background image not covering right edge of screen at higher resolutions?

    I have an issue on this website: www.nieminengroup.fi

    When it's being viewed on higher resolutions, such as 1920x1200, the white background wont stretch all the way to the right, atleast not on the "Yhteys" -part of the site, possibly others.

    How could I fix this? It works fine on 1680x1050 for me atleast. HTML:

    Code:
    <!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>Nieminen Group Oy</title>
    <style type="text/css">
    body,td,th {
    	font-family: "Khmer UI", Arial;
    }
    body {
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	background-image: url(tbg.jpg);
    	background-repeat: repeat;
    }
    #bbg {
    	background-image: url(bbg.png);
    	background-repeat: no-repeat;
    	overflow: visible;
    	position: absolute;
    	visibility: visible;
    	z-index: 5;
    	height: 110px;
    	width: 1000px;
    	left: auto;
    	top: 1140px;
    	right: auto;
    }
    #text {
    	border: thin none #F00;
    	overflow: visible;
    	position: absolute;
    	visibility: visible;
    	z-index: 5;
    	height: 370px;
    	width: 600px;
    	left: 18px;
    	top: 310px;
    	font-family: "Khmer UI", Arial;
    	font-size: 18px;
    	font-style: normal;
    	font-weight: normal;
    	color: #333333;
    }
    #bg {
    	background-image: url(bg2.jpg);
    	background-repeat: repeat-y;
    	position: absolute;
    	visibility: visible;
    	z-index: 1;
    	height: 1300px;
    	width: 100%;
    	left: 0px;
    	top: 150px;
    	right: auto;
    	overflow: hidden;
    }
    </style>
    <link href="ngcss.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    h1 {
    	font-size: 16px;
    	color: #333333;
    }
    h2 {
    	font-size: 24px;
    	color: #18B9FF;
    }
    h1,h2,h3,h4,h5,h6 {
    	font-family: "Khmer UI", Arial;
    }
    a {
    	font-size: 24px;
    	color: #0099CC;
    }
    a:link {
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    }
    a:hover {
    	text-decoration: underline;
    }
    a:active {
    	text-decoration: none;
    }
    </style>
    <script type="text/javascript">
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    </script>
    </head>
    
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onload="MM_preloadImages('etusivu2.png','palvelut2.png','referenssit2.png','yhteys2.png','tarj2.png')">
    
    <div id="tbg"></div>
    
    <div id="topbar"></div>
    
    <div id="fb"><a href="https://www.facebook.com/pages/Nieminen-Group-Oy/387492037999567" target="_blank"><img src="fb.png" width="100" height="100" /></a></div>
    
    <div id="bg"></div>
    
    <div id="wrapper">
    
    <div id="logo"></div>
      
      <div id="menu"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('etusivu','','etusivu2.png',1)"><img src="etusivu1.png" width="100" height="22" id="etusivu" /></a><a href="palvelut.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('palvelut','','palvelut2.png',1)"><img src="palvelut1.png" width="100" height="22" id="palvelut" /></a><a href="referenssit.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('refer','','referenssit2.png',1)"><img src="referenssit1.png" width="100" height="22" id="refer" /></a><a href="tilaus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('ti','','til2.png',1)"><img src="til1.png" width="100" height="22" id="ti" /></a></a><a href="yhteys.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('yht','','yhteys2.png',1)"><img src="yhteys1.png" width="100" height="22" id="yht" /></a></div>
    
    <div id="header"> Yhteystiedot</div>
      
    <div id="text">
    
    <h1>Digitaalinen markkinointi</h1><br /><br />
    
    Henri Nieminen<br /><br />
    
    henri.nieminen@nieminengroup.com<br /><br />
    
    Puh: 0468918801<br /><br /><br />
    
    <h1>Graafinen suunnittelu</h1><br /><br />
    
    Riku Norring<br /><br />
    
    riku.norring@nieminengroup.com<br /><br />
    
    Puh: 0468918787<br /><br /><br />
    
    <h1>Kotisivut ja sähköiset sovellukset</h1><br /><br />
    
    Tiedot tulossa<br /><br /><br />
    
    
    <h1>Myynti ja laskutus</h1><br /><br />
    
    Henri Nieminen<br /><br />
    
    Toimitusjohtaja<br /><br />
    
    henri.nieminen@nieminengroup.com<br /><br /><br />
    
    <h1>Postitusosoite</h1><br /><br />
    
    Nieminen Group Oy <br />
    Pieles 2 A 1 <br />
    40340 JYVÄSKYLÄ<br />
    info@nieminengroup.com<br /><br />
    
    Y-tunnus, Alv. rek: 2468831-3
    <br />
    
    
    
    
    
      
      <div id="bbg"></div>
    
      
      
    </div>
    
    </body>
    </html>
    CSS:
    Code:
    @charset "utf-8";
    
    html, body, div {
    	margin: 0;
    	padding: 0;
    	border: 0;
    }
    
    img {
       border: 0;
       -ms-interpolation-mode: bicubic;
    }
    
    #wrapper {
    	border: 1px none #F00;
    	position: relative;
    	visibility: visible;
    	z-index: 6;
    	height: 600px;
    	width: 1000px;
    	left: auto;
    	top: 0px;
    	right: auto;
    	margin-right: auto;
    	margin-left: auto;
    }
    #topbar {
    	position: absolute;
    	visibility: visible;
    	z-index: 4;
    	height: 100px;
    	width: 100%;
    	left: auto;
    	top: 0px;
    	right: auto;
    	background-repeat: repeat-x;
    	background-image: url(bg3.jpg);
    }
    #logo {
    	background-repeat: no-repeat;
    	position: absolute;
    	visibility: visible;
    	z-index: 5;
    	height: 73px;
    	width: 304px;
    	left: 15px;
    	top: 10px;
    }
    
    #menu {
    	position: absolute;
    	visibility: visible;
    	z-index: 7;
    	height: 27px;
    	width: 600px;
    	top: 86px;
    	right: 15px;
    }
    #products {
    	position: absolute;
    	visibility: visible;
    	z-index: 4;
    	height: 442px;
    	width: 587px;
    	top: 200px;
    	right: 20px;
    	overflow: visible;
    }
    #header {
    	font-family: "Khmer UI", Arial;
    	font-size: 24px;
    	font-style: normal;
    	font-weight: normal;
    	color: #18B9FF;
    	border: thin none #00F;
    	position: absolute;
    	height: 100px;
    	width: 700px;
    	visibility: visible;
    	z-index: 5;
    	left: 18px;
    	top: 250px;
    }
    #badge {
    	background-image: url(badge.png);
    	overflow: visible;
    	position: absolute;
    	visibility: visible;
    	z-index: 4;
    	height: 156px;
    	width: 154px;
    	top: 140px;
    	right: 436px;
    }
    
    #tilaus {
    	overflow: visible;
    	position: absolute;
    	visibility: visible;
    	z-index: 6;
    	height: 90px;
    	width: 188px;
    	left: 18px;
    	top: 500px;
    }
    #bbg2 {
    	background-image: url(bbg2.jpg);
    	background-repeat: no-repeat;
    	overflow: hidden;
    	position: absolute;
    	visibility: visible;
    	z-index: 1;
    	height: 200px;
    	width: 100%;
    	left: auto;
    	right: auto;
    	text-align: center;
    	background-position: center center;
    	top: 125px;
    }
    #tbg {
    	background-image: url(tbg.png);
    	background-repeat: no-repeat;
    	background-position: center center;
    	text-align: center;
    	position: absolute;
    	z-index: 5;
    	height: 200px;
    	width: 100%;
    	left: auto;
    	top: 0px;
    	right: auto;
    }
    #tarj {
    	position: absolute;
    	visibility: visible;
    	z-index: 6;
    	height: 274px;
    	width: 217px;
    	top: 300px;
    	right: 130px;
    	font-family: "Khmer UI", Arial;
    	font-size: 24px;
    	font-weight: bold;
    	color: #09F;
    	text-align: center;
    }
    #fb {
    	position: absolute;
    	visibility: visible;
    	z-index: 10;
    	height: 100px;
    	width: 100px;
    	top: 5px;
    	right: 20px;
    }

  • #2
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I dont think you wrote it correctly.. I think it is typo
    Code:
    #bg {
        background-image: url("bg2.jpg");
        background-repeat: repeat-y;
        height: 600px;
        left: 0;
        overflow: hidden;
        position: absolute;
        right: auto;
        top: 150px;
        visibility: visible;
        width: 100%;
        z-index: 1;
    }
    In my developing kit, it doesnt look like that, but
    Code:
    #bg {
        background-image: url("bg2.jpg");
        background-repeat: repeat-y;
        height: 600px;
        left: 0;
        overflow: hidden;
        position: absolute;
        right: auto;
        top: 150px;
        visibility: visible;
        width: 100%;
        z-index: 1;
    }
    In my opinion, the answers and solutions are
    1. The image (bg2.jpg) resolution is just 1680x552 pixels, so it won't cover the whole of the higher resolutions computer.. So, you need to change the bg2.jpg into a higher-resolution one..
    2. Use background-repeat : repeat to repeat the background ..
    For further information about repeating images, see http://www.w3schools.com/cssref/play...kground-repeat

    Good Luck!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •