random resizeable background

Question

chevechiva 0 Newbie Poster

14 Years Ago

Hi again chaps, here I come with one very common problem which I haven't been able to find a proper solution. Please take in consideration that I've made my part of research.

Here's the thing; I am building a website with a very plain main page. It displays some text but it also displays a random background avoiding scrollbars, etc.

I've managed to do the random image thing, but I also want it to scale the random image. Also I have tried this same thing and I got it working but in a different file, I just don't know how to combine this two solutions.

I attach the code of both files:

FILE #1 - RANDOM IMAGE WORKING BUT NOT SCALABLE:

<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>ARQme</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<script type="text/javascript">
      function changeImg(imgNumber) {
      var myImages = ["artes.jpg", "artes1.jpg", "auditorio1.jpg", "auditorio2.jpg", "biblio1.jpg", "biblio2.jpg", "cafe1.jpg", "cafe2.jpg", "expo1.jpg", "expo2.jpg", "le1.jpg", "le2.jpg", "le3.jpg", "prepa1.jpg", "prepa2.jpg", "vr1.jpg", "vr2.jpg"];
      var imgShown = document.body.style.bg;
      var newImgNumber =Math.floor(Math.random()*myImages.length);
      document.body.style.backgroundImage = 'url('+myImages[newImgNumber]+')';
      }

      window.onload=changeImg;
	  
var newwindow;
function poptastic(url)
{
newwindow=window.open(url,'ARQme',"fullscreen",'top=0,left=0,width='+(screen.availWidth)+',height ='+(screen.availHeight)+',fullscreen=yes,toolbar=0 ,location=0,directories=0,status=0,menubar=0,resizable=0,scrolling=0,scrollbars=0');
}

</script>


<style type="text/css">
html,body {
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
 }
 
  #buzon {
	font-family: Arial Narrow;
	font-size: 12px;
	color: #89C500;
}

 #buzon2 {
	font-family: Arial Narrow;
	font-size: 12px;
	color: #89C500;
}

#buzon:hover {
	text-decoration: none;
	color: #FF0000;
}

#buzon2:hover {
	text-decoration: none;
	color: #FF0000;
}

a {
	font-family: Arial Narrow;
	font-size: 20px;
	color: #89C500;
}

#container {
    position:absolute;
    z-index:1;
    width:100%;
    height:100%;
    overflow:hidden;
 }
 
#contents {
	height:100%;
	width:720px;
    padding:10px 20px;
    border-right:2px solid #000;
    border-left:2px solid #000;
    background-color:#fff;
    margin:auto;
 }
 
#contents_p {
    margin:0;
    text-align:left;
	height:100%;
 }
 
.bg {
    position:absolute;
	background-attachment:fixed;
	background-repeat: no-repeat;
    z-index:0;
    width:100%;
    height:100%;
  }
 
#background img {
    position:absolute;
	background-attachment:fixed;
	background-repeat: no-repeat;
    z-index:0;
	width:100%;
    height:100%;
 }
 
 p {
	font-family: Arial Narrow;
	margin:0;
	padding:0;
	font-size: 12px;
	color: #89C500;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #89C500;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

a:active {
	text-decoration: none;
	color: #CC0000;
}


table.full-height {
	height:100%;
	width:395px;
}

#row1 {
height:5%;
}

#row2 {
height:10%;
}

#row3 {
height:5%;
}

#row4 {
height:75%;
vertical-align:bottom;
}

#row5 {
height:5%;
}

</style>

</head>
<body class="bg">

<div id="container">

<div id="contents_p">
 <table class="full-height" border="0" cellpadding="0" cellspacing="0">
    <tr id="row1">
      <td style="width:30px">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr id="row2">
      <td>&nbsp;</td>
      <td valign="bottom"><div align="left"><img src="images/aqmlogo.png" alt="arqme logo" width="125" height="103" /></div></td>
    </tr>
    <tr id="row3">
      <td>&nbsp;</td>
      <td><strong><a href="arqme.html" onclick="poptastic(this.href); return false;">enter &gt;</a></strong></td>
    </tr>
    <tr id="row4">
      <td>&nbsp;</td>
      <td><p><strong>Taller:</strong></p>
        <p> Ampliaci&oacute;n Alfredo del Mazo #1</p>
        <p>Col. M&eacute;xico Nuevo, Atizap&aacute;n de Zaragoza</p>
      <p>Estado de M&eacute;xico</p>
      <p>&nbsp;</p>
      <p><strong>Oficinas Administrativas:</strong></p>
      <p>Paseo de los Laureles #150 PB</p>
      <p>Col. Bosques de las Lomas</p>
      <p>Delegaci&oacute;n Cuajimalpa</p>
      <p>M&eacute;xico DF</p>
      <p>&nbsp;</p>
      <p>+52 (55) 58166006 - 16686049</p>
      <p><a id="buzon" href="mailto:buzon@arqme.com">buzon@arqme.com</a></p>
      <p><a id="buzon2" href="http://www.arqme.com/sistema/v3" onclick="poptastic(this.href); return false;">Intranet</a></p>      </td>
    </tr>
    <tr id="row5">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>

</div>

<!--<div id="background">
<img src="selecc14.jpg" alt="" />
</div>
-->
</body>
</html>

FILE #2 - SCALABLE IMAGE WORKING BUT RANDOM IMAGE NOT WORKING:

<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>ARQme</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />

<script type="text/javascript">
var randnum = Math.random();
var inum = 17;
var rand1 = Math.round(randnum * (inum-1)) + 1;
images = new Array
images[1] = "selecc1.jpg"
images[2] = "selecc2.jpg"
images[3] = "selecc3.jpg"
images[4] = "selecc4.jpg"
images[5] = "selecc5.jpg"
images[6] = "selecc6.jpg"
images[7] = "selecc7.jpg"
images[8] = "selecc8.jpg"
images[9] = "selecc9.jpg"
images[10] = "selecc10.jpg"
images[11] = "selecc11.jpg"
images[12] = "selecc12.jpg"
images[13] = "selecc13.jpg"
images[14] = "selecc14.jpg"
images[15] = "selecc15.jpg"
images[16] = "selecc16.jpg"
images[17] = "selecc17.jpg"
var image = images[rand1]

var newwindow;
function poptastic(url)
{
newwindow=window.open(url,'ARQme',"fullscreen",'top=0,left=0,width='+(screen.availWidth)+',height ='+(screen.availHeight)+',fullscreen=yes,toolbar=0 ,location=0,directories=0,status=0,menubar=0,resizable=0,scrolling=0,scrollbars=0');
}

</script>


<style type="text/css">
html,body {
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
 }
 
 #buzon {
	font-family: Arial Narrow;
	font-size: 12px;
	color: #89C500;
}

 #buzon2 {
	font-family: Arial Narrow;
	font-size: 12px;
	color: #89C500;
}

#buzon:hover {
	text-decoration: none;
	color: #FF0000;
}

#buzon2:hover {
	text-decoration: none;
	color: #FF0000;
}

a {
	font-family: Arial Narrow;
	font-size: 20px;
	color: #89C500;
}

#container {
    position:absolute;
    z-index:1;
    width:100%;
    height:100%;
    overflow:hidden;
 }
 
#contents {
	height:100%;
	width:720px;
    padding:10px 20px;
    border-right:2px solid #000;
    border-left:2px solid #000;
    background-color:#fff;
    margin:auto;
 }
 
#contents_p {
    margin:0;
    text-align:left;
	height:100%;
 }
 
#background {
    position:absolute;
    z-index:0;
    width:100%;
    height:100%;
  }
 
#background img {
    width:100%;
    height:100%;
 }
 
 p {
	font-family: Arial Narrow;
	margin:0;
	padding:0;
	font-size: 12px;
	color: #89C500;
}

a:link {
	text-decoration: none;
}

a:visited {
	text-decoration: none;
	color: #89C500;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

a:active {
	text-decoration: none;
	color: #CC0000;
}


table.full-height {
	height:100%;
	width:395px;
}

#row1 {
height:5%;
}

#row2 {
height:10%;
}

#row3 {
height:5%;
}

#row4 {
height:75%;
vertical-align:bottom;
}

#row5 {
height:5%;
}

</style>

</head>
<body>

<div id="container">

<div id="contents_p">
 <table class="full-height" border="0" cellpadding="0" cellspacing="0">
    <tr id="row1">
      <td style="width:30px">&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr id="row2">
      <td>&nbsp;</td>
      <td valign="bottom"><div align="left"><img src="images/arqmelogo2.png" alt="arqme logo" width="128" height="107" /></div></td>
    </tr>
    <tr id="row3">
      <td>&nbsp;</td>
      <td><strong><a href="arqme.html" onclick="poptastic(this.href); return false;">enter &gt;</a></strong></td>
    </tr>
    <tr id="row4">
      <td>&nbsp;</td>
      <td><p>Loma del Viento #1</p>
      <p>Col. Nuevo M&eacute;xico, Atizap&aacute;n de Zaragoza</p>
      <p>+52 (55) 166 86049 + 58 166 006</p>
      <p><a id="buzon" href="mailto:buzon@arqme.com">buzon@arqme.com</a></p>
      <p><a id="buzon2" href="http://www.arqme.com/sistema/v3" onclick="poptastic(this.href); return false;">Intranet</a></p>
      </td>
    </tr>
    <tr id="row5">
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</div>

</div>

<div id="background">
<img src='' alt="" />
</div>

</body>
</html>

I would really appreciate any help, I think that FILE 1 is the one that has the more chances to be fixed.

Thanx in advance!!

javascript

1 Contributor
1 Reply
157 Views
6 Days Discussion Span
Latest Post 14 Years Ago Latest Post by chevechiva

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

chevechiva 0 Newbie Poster · Answer 1 · 2010-01-25T22:49:48+00:00

C´mon guys, help me out with this one! I still haven´t found the solution.

Cheers to you all!