CSS / JS - Background probelm.

Ok, izdelujem uvodno stran za portal in imam naslednji problem, nevem kako se
lotit zadeve. Uporabu sem spodaj navedeno kodo da sm dobu efekt, da vsakic ko
obisces stran se v ozadju prikaze druga slika seveda z java scriptom vkljucenim.

Zaradi resolucij uporabljam veliko resolucijske slike a imam zaradi tega problem, da
slika ne pase v okno. Kar morem doeci je to da se celotna slika vidi pri vseh
resolucijah da pac pase v okno brskalnika.

Koda:

<html>
<head>

<script type="text/javascript">

 function randomize(min, max) {
 if (!min)
 min = 0;
 if (!max)
 max = 1;
 return Math.floor(Math.random()*(max+1)+min);

  }

  function randomBg() {
     var bgs = new Array();

  bgs.push("boom.jpg");
  bgs.push("float.jpg");
  bgs.push("frend.jpg");
  bgs.push("ada.jpg");
  bgs.push("gas.jpg");

 document.body.style.backgroundImage = "url(" + bgs[randomize(0, bgs.length-1)] + ")";

  }

</script>
</head>

<body onLoad="randomBg()" style="text-align:center;">

<span style="font-size:1.5em; background-color:white; border:1px dashed black; padding:5px;">Welcome</span>

</body>
</html>

Pac fit background image to size of browser..Nekim je lazje ang..
Hvala v naprej.

1 odgovor

Ok, kode nisem gledal. Problem je, ker ne moreš vedeti kakšna je resolucija brskalnika, kakšno je vidno polje, koliko orodnih vrstic imajo uporabniki ipd...

Torej, moj predlog je, da pač narediš tako, da se dejansko slika v ozadju zamakne. Torej, jo poravnaš recimo levo desno v browserju, zgoraj spodaj se pa premakne tako, da gre del slike izven vidnega polja. Upam, da me razumeš. Prav tako lahko narediš tako, da sliko fiksiraš na zgornji in spodnji rob, levo desno pa jo premakneš po potrebi. Tako vedno zapolniš prostor. Seveda, tukaj moraš z JS malo preračunati, da vidiš kako boš ozadje postavil.

V tem primeru bo slika vedno v pravem razemerju. Lahko pa jo tudi za nekaj % povečaš ali zmanjšaš ter še vedno ohranjaš razmerje.