Sfondo si ripete a dx ed in basso

01-03-2014, 21.53.28

Ciao ragazzi,
ho un problema con il mio sfondo, si ripete: specialmente a destra 3 volte e sotto, ho provato vari tags tra cui "fixed" ed il no repeat (css) ma nada, dove sbaglio?
Grazie,
http://www.fishermanhero.com

Codice:

<html>
<head>

<title>PESCA NEGOZIO PESCA CEPRANO FROSINONE CANNE DA PESCA MULINELLI FISHERMAN HERO ATTREZZATURE PESCA SURF CASTING BOLOGNESE TROTA LAGO</title>
<META NAME="keywords" CONTENT="PESCA, NEGOZIO PESCA CEPRANO, FROSINONE, CANNE DA PESCA, MULINELLI, FISHERMAN HERO, ATTREZZATURE PESCA, SURF CASTING, BOLOGNESE, TROTA LAGO">

<style type="text/css">
<!-- 
.textstyle {
	/* style attributes for the comments below the pictures */
	font-family: Arial;
	font-size: 8pt;
	color:#FFFFFF;
	text-align:center;
}
.imagestyle {
	/* style attributes for the images */
	padding:5px;
}
.boxstyle{
	/* style attributes for the slideshow-box */
	border-style:solid;
	border-width:1px;
	border-color:white;
	
	/* shadow for Firefox */
	-moz-box-shadow: 3px 3px 5px #AAAAAA;

	/* shadow for Safari and Chrome */
	-webkit-box-shadow: 3px 3px 5px #AAAAAA;

	/* shadow for Opera */
	box-shadow: 3px 3px 5px #AAAAAA;
	
	/* background-color */
	background-color:#F6F6F6;
      } 
-->
</style>



</head>

<body link="#FFFF00" vlink="#FFFF00" alink="#FFFF00" background="http://imageshack.com/a/img835/3369/g67r.png">
<div style="text-align:center">
<div style="display:inline-block">
<script type="text/javascript">
<!-- 
// Each image requires a block, as shown below:
// {
// imgurl : "http://www.the-url.com/of/your/picture.jpg",
// linkto : "http://www.where-you-go-if-you-click-on-a-image.com",
// }, each block ends with a comma (exception: the very last block)

var picture= [
{
imgurl : "https://imagizer.imageshack.us/v2/435x326q90/19/3weh.jpg",
comment : "Hi sweetherat!",
linkto : "/foto.htm"
}, // comma required

{
imgurl : "http://s2.postimg.org/ken49wrgp/IMG_1938.jpg",
comment : "The truth about trees.",
linkto : "/foto.htm"
} // NO comma!!!!

]

// width of the visibie part of the slideshow (pixels)
var scrollerwidth=700

// height of the slideshow (pixels).
// ATTENTION: The height must include height of image plus height of text!
var scrollerheight=250

// width of the transparent zones on the left and on the right (pixels)
var transparentzone_width=40

// the color for the transpranet zone on the left and on the right
var transparentzone_color="#FF7F50"

/////////////////////////////////////////////
// END OF SCRIPT CONFIGURATION 
/////////////////////////////////////////////

// do not edit below this line
var translayerswidth=1
var translayersmax=Math.floor(transparentzone_width/translayerswidth)
var translayersleftpos=0
var translayersopacity=100
var translayersfactor=100/translayersmax
var translayerswidthall=translayersmax*translayerswidth
var allpicturewidth
var distancepictopic=0
var scrollerleft=0
var scrollertop=0
var pause=20
var step=2
var newstep=step
var clipleft,clipright,cliptop,clipbottom
var i_picture=0
var timer
var picturecontent=""
var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0
var browserinfos=navigator.userAgent 
var opera=browserinfos.match(/Opera/)  

var preloadedimages=new Array()
for (i=0;i<picture.length;i++){
	preloadedimages[i]=new Image()
	preloadedimages[i].src=picture[i].imgurl
}

function init() {
	allpicturewidth=document.getElementById('emptypicturediv').offsetWidth
	document.getElementById('picturediv').style.top=scrollertop+"px"
    document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth+"px"
	clipleft=0
	clipright=0
	cliptop=0
	clipbottom=scrollerheight
	document.getElementById('picturediv').style.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
	document.getElementById('picturediv').style.visibility="visible"
	scrollpicture()  
}

function scrollpicture() {
	if (parseInt(document.getElementById('picturediv').style.left)>=scrollerleft-allpicturewidth) {
		document.getElementById('picturediv').style.left=parseInt(document.getElementById('picturediv').style.left)-step+"px"
		clipright+=step
		if (clipright>scrollerwidth) {
			clipleft+=step
		}
		document.getElementById('picturediv').style.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"		
		var timer=setTimeout("scrollpicture()",pause)
	}
	else {
		resetposition()
	}
}

function onmsover() {
	step=0
}
function onmsout() {
	step=newstep
}

function resetposition() {
	allpicturewidth=document.getElementById('emptypicturediv').offsetWidth
    document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth+"px"
	clipleft=0
	clipright=0
	document.getElementById('picturediv').style.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
    scrollpicture()
}

picturecontent=""
picturecontent+="<table cellpadding=2 cellspacing=0>"
picturecontent+="<tr>"
for (i=0;i<=picture.length-1;i++) {
	picturecontent+="<td>"
	picturecontent+="<a href=\""+picture[i].linkto+"\" onMouseOver=\"javascript:onmsover()\" onMouseOut=\"javascript:onmsout()\">"
	picturecontent+="<img src=\""+picture[i].imgurl+"\" border=0 class='imagestyle'></a>"
	picturecontent+="</td>"
}
picturecontent+="</tr>"
picturecontent+="<tr>"
for (i=0;i<=picture.length-1;i++) {
	picturecontent+="<td class='textstyle'>"
	picturecontent+=picture[i].comment
	picturecontent+="</td>"
}
picturecontent+="</tr>"
picturecontent+="</tr></table>"

if (ie || ns6) {
	document.write('<div class="boxstyle" style="position:relative;width:'+scrollerwidth+'px;height:'+scrollerheight+'px;overflow-x:hidden">')
	document.write('<div id="picturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden;overflow-x:hidden;">'+picturecontent+'</div>')
	if (ie) {
		for (i=0;i<=translayersmax;i++) {
		document.write('<span ID="trans'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+transparentzone_color+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')
		translayersleftpos+=translayerswidth
		translayersopacity-=translayersfactor
		}
		translayersleftpos=scrollerwidth-translayersleftpos
		for (ii=0;ii<=translayersmax;ii++) {
		document.write('<span ID="trans'+ii+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+transparentzone_color+';filter:alpha(opacity='+translayersopacity+');overflow:hidden"> </span>')
		translayersleftpos+=translayerswidth
		translayersopacity+=translayersfactor
		}
	}
	if (ns6) {
		for (i=0;i<=translayersmax-1;i++) {
		document.write('<span ID="transleft'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+transparentzone_color+';opacity:'+translayersopacity/100+';overflow:hidden"> </span>')
		translayersleftpos+=translayerswidth
		translayersopacity-=translayersfactor
		if (translayersopacity<0) {translayersopacity=0.001}
		}
		translayersleftpos=scrollerwidth-translayersleftpos
		translayersopacity=0.001
		for (i=0;i<=translayersmax-1;i++) {
		document.write('<span ID="transright'+i+'" style="position:absolute;top:0px;left:'+translayersleftpos+'px;width:'+translayerswidth+'px;height:'+scrollerheight+'px;background-color:'+transparentzone_color+';opacity:'+translayersopacity/100+';"> </span>')
		translayersleftpos+=translayerswidth
		translayersopacity+=translayersfactor
		}
	}
	document.write('</div>')
	document.write('<div id="emptypicturediv" style="position:absolute;top:0px;left:0px;height:'+scrollerheight+'px;visibility:hidden">'+picturecontent+'</div>')

	window.onload=init
}
// -->
</script>
</div>
</div>


<div align="center">
&nbsp;<table border="1" width="70%">
		<tr>
			<td align="center"><b><font color="#FFFF00">
			<a href="http://www.fishermanhero.com">
			<span style="text-decoration: none">HOME</span></a></font></b></td>
			<td align="center"><font color="#FFFF00"><b>
			<a href="http://www.fishermanhero.com/contatti.htm">
			<span style="text-decoration: none">CONTATTI</span></a></b></font></td>
			<td align="center"><font color="#FFFF00"><b>E-COMMERCE</b></font></td>
			<td align="center"><font color="#FFFF00"><b>HEROES' GALLERY</b></font></td>
		</tr>
	</table>
</div>
<p align="center">
<img border="0" src="https://imagizer.imageshack.us/v2/358x461q90/844/adhj.png" width="281" height="393"></p>
<p align="center">
&nbsp;</p>
<p align="center">
<b><font size="6">Fisherman Hero, Negozio di pesca sportiva</font></b></p>
<p align="center">
<b><font size="6"><span style="background-color: #FF7F50">Ceprano</span><span style="background-color: #FF7F50">(FR), Via Campidoglio 181</span></font></b></p>
<p align="center">
<b>
<font size="6">Orari apertura: Dal Lunedì al Sabato ore 09:00-13:00 e 16:00-20:00</font></b></p>
<p align="center">
<b>
<font size="6">Tel. 0775/950459</font></b></p>
<p align="center">
<b>
<font size="6"><span style="background-color: #FF7F50">Email</span><span style="background-color: #FF7F50">: addafishermanhero@gmail.com</span></font></b></p>
</body>

</html>

**karl94** · 01-03-2014, 22.04.55

Non usare i vecchi attributi come background, align, border, width, height, link (e vari), e l'elemento font, sono tutti stati deprecati a favore dei fogli di stile CSS.

In particolare, per lo sfondo puoi usare il codice seguente

Codice HTML:

<style type="text/css">
	body{
		background: url(indirizzo dell'immagine) no-repeat;
	}
</style>

Solo che ovviamente poi ti rimarrà l'immagine dello sfondo in alto a sinistra, fissa e con il resto dello sfondo bianco. Quindi potrebbe servirti dare uno sguardo alla proprietà CSS background-size, per ridimensionare lo sfondo in modo che copra tutta l'area visibile.

01-03-2014, 22.10.07

Lo inserisco tra <head> e </head> ?
PS: perchè in basso ho comunque la barra di scorrimento orizzontale? :/

**karl94** · 01-03-2014, 22.13.54

Sì, rimuovi però almeno l'attributo background dall'elemento body.

01-03-2014, 22.16.42

Già fatto.
Perchè in basso ho comunque la barra di scorrimento orizzontale?

**karl94** · 01-03-2014, 22.22.44

È colpa dell'elemento con id emptypicturediv. Che senso ha nasconderlo? Se non ti serve toglilo direttamente.

01-03-2014, 22.26.19

Tolgo direttamente questo?

Codice:

function init() {
	allpicturewidth=document.getElementById('emptypicturediv').offsetWidth
	document.getElementById('picturediv').style.top=scrollertop+"px"
    document.getElementById('picturediv').style.left=scrollerleft+scrollerwidth+"px"
	clipleft=0
	clipright=0
	cliptop=0
	clipbottom=scrollerheight
	document.getElementById('picturediv').style.clip ="rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)"
	document.getElementById('picturediv').style.visibility="visible"
	scrollpicture()  
}

**karl94** · 01-03-2014, 22.30.53

Beh, prova. Se poi crea problemi ce lo rimetti e si controlla meglio il codice.

01-03-2014, 22.35.03

Nada. Se lo tolgo, le immagini che ho in alto non scorrono.

02-03-2014, 14.03.46

Risolto, ecco come:
Aggiungere questa riga nella parte css della pagina:

body {overflow-x:hidden;}

Discussione: Sfondo si ripete a dx ed in basso

LinkBack

Strumenti discussione

Display

Sfondo si ripete a dx ed in basso

Regole di scrittura