Immagine Sfondo body non completa

P

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Ciao, vengo al sodo. sto sistemando un sito ed ho creato diversi div con bordi arrotondati. Lo sfondo di base è bianco ma quando inserisco una immagine di fondo mi rimangono i bordi in bianco e non riesco a staccare visivamente i vari div per renderli indipendenti. Mi chiedo: ma per fare questo è obbligatorio usare un'immagine con PS invece del codice in css nei div?
 
Ciao,

così è un po' difficile capire l'effetto che vuoi ottenere se hai la possibilità prova a postare uno screenshoot. Per staccare visivamente i div puoi provare ad aggiungere dei margini o a dargli un bordo.
 
Certo hai ragione anche tu. ecco l'immagine Immagine.JPG
Come puoi vedere intorno al div con i bordi ho un bordino piccolo che mi corre lungo tutto il sito e non riesco a mettere lo sfondo a pieno.
 
Se fa prova a postare anche il css e l'immagine che usi come sfondo. Vorresti inserire lo sfondo con le nuvole per tutta la pagina senza visualizzare i bordi bianchi e fare in modo che i contenitori arrotondati siano più distanti?
 
Ecco qua il CSS
PHP: 
@charset "utf-8";
/* CSS Document */

html,body { margin: 0; padding: 0; height:100%;}

body {	background-attachment:fixed;
		background-image:url(../Immagini/sfondo.gif);
		background-repeat:repeat;}

html {	height: 100%;}
						
						
						
p:first-letter{font-weight: bold; color:#0F0}
h1{color: #FFF}

/*#header,#header2,#header3,#footer,#testo{color: #000; border-color: #FFF}*/
#container{
	width: 1200px;
	height: auto !important;
	height: 100%;
	min-height: 100%;
/*	background: #FFF;*/
	margin: 0 auto -50px;
	border: solid #fff;
	min-height: 100%;
	margin-bottom: -10px;
	margin-top: 10px;
	padding-bottom: 10px;
	position:relative;
}

#header {
		height: 80px;
		font-family:"Times New Roman", Times, serif;
		font-size: 62px;
		font-style:italic;
		text-align: center;
		background-color:#000;
		-moz-border-radius: 10px 10px 0 0;
		-webkit-border-radius: 10px 10px 0 0;
		border-radius: 10px 10px 0 0;
		/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
		-moz-box-shadow: 0px 0px 4px #000000;
		-webkit-box-shadow: 0px 0px 4px #000000;
		box-shadow: 0px 0px 4px #000000;
		/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
		/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
		/*Element must have a height (not auto)*/
		/*All filters must be placed together*/
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000')";
		/*Element must have a height (not auto)*/
		/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
		}

#header2{
	height: 22px;
	background-color:#000000;
/*	border-color: #FFF;*/
	text-align: center;
	font-style:italic;
	vertical-align: central;
	margin: 0 0 15px 0;
	-moz-border-radius: 0 0 10px 10px;
	-webkit-border-radius: 0 0 10px 10px;
	border-radius: 0 0 10px 10px;
	/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
	-moz-box-shadow: 0px 0px 4px #000000;
	-webkit-box-shadow: 0px 0px 4px #000000;
	box-shadow: 0px 0px 4px #000000;
	/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
	/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000')";
	/*Element must have a height (not auto)*/
	/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
	
}
	

#header3{
	height: 30px;
	background-color:#000;
	text-align: center;
	text-justify: auto;
	font-family: "Times New Roman", Times, serif;
	font-size: 30px;
	vertical-align: middle;
	margin: 11px 0px 9px 0px;
	padding:5px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
	-moz-box-shadow: 0px 0px 4px #000000;
	-webkit-box-shadow: 0px 0px 4px #000000;
	box-shadow: 0px 0px 4px #000000;
	/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
	/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000')";
	/*Element must have a height (not auto)*/
	/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/

}
#header3 h1 { background-color:#000;}

#logo {
	height: 300px;
	background-position:center;
	padding: 0 10px;
	background-color:#FFF;
	overflow:hidden;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
	-moz-box-shadow: 0px 0px 4px #000000;
	-webkit-box-shadow: 0px 0px 4px #000000;
	box-shadow: 0px 0px 4px #000000;
	/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
	/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
	/*Element must have a height (not auto)*/
	/*All filters must be placed together*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000')";
	/*Element must have a height (not auto)*/
	/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
	}

/*Inizio Menu*/

#menu { background-color:#CCC;
		width: 1200px;
		height: 30px;
		margin: 6px auto;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
		-moz-box-shadow: 0px 0px 4px #000000;
		-webkit-box-shadow: 0px 0px 4px #000000;
		box-shadow: 0px 0px 4px #000000;
		/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
		/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
		/*Element must have a height (not auto)*/
		/*All filters must be placed together*/
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000')";
		/*Element must have a height (not auto)*/
		/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
		}

ul { list-style:none; margin:0; padding:0;}
li { margin:0; padding:0;}


ul.menu li { float:left; margin-right:15px; margin-top:10px; display:inline;}
ul.menu li a { display:inline-block; padding:4px; background:#CCC; color:#333; text-decoration:none;}


ul.menu li a:hover { color:#fff; background:#333;-moz-border-radius: 5px;
						-webkit-border-radius: 5px;
						border-radius: 5px;
						/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
						-moz-box-shadow: 0px 0px 4px #000000;
						-webkit-box-shadow: 0px 0px 4px #000000;
						box-shadow: 0px 0px 4px #000000;
						/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
						/*All filters must be placed together*/
						filter: /* IE6,IE7 e IE8   */
						progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=0,strength=5) /* top */  
						progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=90,strength=5) /* left */
						progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=180,strength=5) /* bottom */
						progid:DXImageTransform.Microsoft.Shadow(color=#dddddd,direction=270,strength=5);  /* right */    
						filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
						/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
						/*Element must have a height (not auto)*/
						/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
}
ul.menu li ul { display:none;}
#menu ul.menu li {	margin: 4px 70px;}

/*Testo*/

#testo {	padding-bottom: 10px;
			height:500px;
			background-color:#FFFFFF;
			border-color: #999999;
			border: 2px solid;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			border-radius: 10px;
			/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
			-moz-box-shadow: 0px 0px 4px #000000;
			-webkit-box-shadow: 0px 0px 4px #000000;
			box-shadow: 0px 0px 4px #000000;
			/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
			filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
			/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
			/*Element must have a height (not auto)*/
			/*All filters must be placed together*/
			-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000')";
			/*Element must have a height (not auto)*/
			/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
			}

#testo p {	font-style:italic;
			padding-left: 1.5em;
			font-size:20px;
			line-height: 40px;
			text-indent: 40pt;
		}
		
#testo p:first-letter {	font-size:40px;}		


#testomappa {	padding-bottom: 10px;
				height:700px;
				text-align: center;
				background-color:#FFFFFF;
				border-color: #999999;
				border: 2px solid;
				-moz-border-radius: 10px;
				-webkit-border-radius: 10px;
				border-radius: 10px;
				/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
				-moz-box-shadow: 0px 0px 4px #000000;
				-webkit-box-shadow: 0px 0px 4px #000000;
				box-shadow: 0px 0px 4px #000000;
				/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
				filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
				/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
				/*Element must have a height (not auto)*/
				/*All filters must be placed together*/
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000')";
				/*Element must have a height (not auto)*/
				/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
				}

#testocontatti {	padding-bottom: 10px;
					height:700px;
					text-align: center;
					font-family:Georgia, "Times New Roman", Times, serif;
					font-size: 24px;
					padding-top: 180px;
					background-color:#FFFFFF;
					border-color: #999999;
					border: 2px solid;
					-moz-border-radius: 10px;
					-webkit-border-radius: 10px;
					border-radius: 10px;
					/*IE 7 AND 8 DO NOT SUPPORT BORDER RADIUS*/
					-moz-box-shadow: 0px 0px 4px #000000;
					-webkit-box-shadow: 0px 0px 4px #000000;
					box-shadow: 0px 0px 4px #000000;
					/*IE 7 AND 8 DO NOT SUPPORT BLUR PROPERTY OF SHADOWS*/
					filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000');
					/*INNER ELEMENTS MUST NOT BREAK THIS ELEMENTS BOUNDARIES*/
					/*Element must have a height (not auto)*/
					/*All filters must be placed together*/
					-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#000000')";
					/*Element must have a height (not auto)*/
					/*--IE9 WILL PLACE THE FILTER ON TOP OF THE ROUNDED CORNERS--*/
					}
#testocontatti h1 { color:#000;
					font-size:50px;
					font-style:italic;
					}
					
#testocontatti h3 {	font-style:italic;}


#button {	cursor:pointer;}


/*Menu Footer*/


#footer {
	width: 1196px;
	height: 50px;
	background-color: #fff;
	line-height: 3em;
	margin: 0 2px 50px 2px;
	text-align:center;
	background-color:#333;
	position: absolute;
	bottom: 0;
	border-color: #00FF00;
}

per l'immagine non uso nulla prima era sfondo bianco.
 
Dal codice dovresti usare l'immagine sfondo.gif ti chiedevo di postarla perchè magari visualizzi i bordi bianchi per chè sono contenuti nell'immagine. Un'altra possibilità è qui è un po' difficile capire perchè non so quale sia il div #container ma se è quello che contiene i vari rettangoli arrottondati dovresti eliminare la riga sottolineata.

#container{
width: 1200px;
height: auto !important;
height: 100%;
min-height: 100%;
margin: 0 auto -50px;
border: solid #fff;
min-height: 100%;
margin-bottom: -10px;
margin-top: 10px;
padding-bottom: 10px;
position:relative;
}
 
Olleeeeeeeeeeeeeeeeee! Siamo a due caffè offerti. Guarda che poi diventi nervosa. Aahahahaha :cool::cool::cool:

Ho tolto magicamente il bordo che non avevo visto e magicamente tutto è OK!

Senti visto che ci siamo non è che sapresti aiutarmi sul problema con phpmailer? In sintesi: karkup e php corretti, ma quando deve inviare la mail sia a me sia al mittente non arriva nulla. C'è un thread per questo.

Intanto un grazie è d'obbligo!
 
Devi accedere o registrarti per poter rispondere.

Discussioni simili

F
Aiuto! cambio immagine di sfondo al cambio pagina
Risposte
2
Visite
1K
HTML e CSS
Fabrizio5778
F
gara1
inserire immagine di sfondo in canvas
Risposte
0
Visite
1K
Javascript
gara1
gara1
A
Immagine decentrata con sfondo trasparente
Risposte
0
Visite
974
Photoshop
Agamennone
A
R
Non riesco a rinnovare l'immagine di sfondo
Risposte
1
Visite
1K
PHP
MarcoGrazia
MarcoGrazia
R
  • Bloccata
Non riesco a cambiare l'immagine di sfondo
Risposte
4
Visite
1K
PHP
Roberto_V
R
G
Modifica immagine di sfondo attraverso un bottone
Risposte
18
Visite
3K
PHP
Max 1
Max 1
L
  • Bloccata
[HTML] problema sfondo tutto schermo con immagine
Risposte
1
Visite
4K
HTML e CSS
Max 1
Max 1
felino
[Wordpress] Immagine di sfondo (sotto il template)
Risposte
8
Visite
2K
WordPress
Jonn
Jonn
A
[Javascript] Impostare immagine sfondo da checkbox, sito web
Risposte
1
Visite
2K
Javascript
Sevenjeak
Sevenjeak
V
javascript - cambiare immagine di sfondo di un div
Risposte
3
Visite
5K
Javascript
criric
criric
R
[Flash] Animare un testo con un' immagine sullo sfondo
Risposte
7
Visite
2K
Windows e Software
Max 1
Max 1
Papalla
CSS3 - immagine di sfondo con elementi che appaiono col mouse hover
Risposte
4
Visite
2K
HTML e CSS
Papalla
Papalla
Fuego2806
  • Bloccata
Stampare dati Form su immagine di sfondo con html
Risposte
1
Visite
1K
HTML e CSS
Max 1
Max 1
Fuego2806
[PHP] Stampare dati Form su immagine di sfondo con html
Risposte
70
Visite
10K
PHP
Fuego2806
Fuego2806
Gregia
Immagine con testo affianco (sfondo colore diverso)
Risposte
8
Visite
4K
HTML e CSS
Max 1
Max 1
Zea
problemi duplicazione immagine di sfondo
Risposte
3
Visite
2K
HTML e CSS
Zea
Zea
M
problema immagine di sfondo e risoluzione schermo
Risposte
1
Visite
2K
HTML e CSS
criric
criric
R
Sostiture il colore di sfondo di un'immagine con canvas e drawImage... dove sbaglio?
Risposte
1
Visite
2K
Javascript
ruttan
R
P
link su immagine di sfondo
Risposte
1
Visite
1K
HTML e CSS
ByProgrammer
B
L
fpdf .. immagine di sfondo e posizionamento testo
Risposte
1
Visite
4K
PHP
luigi777
L
Alto Basso