Go Back   CodingForums.com > :: Client side development > HTML & CSS
Reload this Page Background image not covering right edge of screen at higher resolutions?

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 12-21-2012, 08:50 AM   PM User | #1
Runicode
New to the CF scene

 
Join Date: Jan 2011
Posts: 9
Thanks: 1
Thanked 0 Times in 0 Posts
Runicode is an unknown quantity at this point
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;
}
Runicode is offline   Reply With Quote
Old 12-21-2012, 09:21 AM   PM User | #2
terryds
New to the CF scene

 
Join Date: Dec 2012
Posts: 3
Thanks: 0
Thanked 0 Times in 0 Posts
terryds is an unknown quantity at this point
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!
terryds is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 02:12 AM.
Advertisement
Log in to turn off these ads.