Immagine Sfondo body non completa

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?
 

Nipponina

Nuovo Utente
19 Lug 2012
14
0
0
Venezia
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.
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
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.
 

Nipponina

Nuovo Utente
19 Lug 2012
14
0
0
Venezia
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?
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
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.
 

Nipponina

Nuovo Utente
19 Lug 2012
14
0
0
Venezia
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;
}
 

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
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!
 
Discussioni simili
Autore Titolo Forum Risposte Data
F Aiuto! cambio immagine di sfondo al cambio pagina HTML e CSS 2
gara1 inserire immagine di sfondo in canvas Javascript 0
A Immagine decentrata con sfondo trasparente Photoshop 0
R Non riesco a rinnovare l'immagine di sfondo PHP 1
R Non riesco a cambiare l'immagine di sfondo PHP 4
G Modifica immagine di sfondo attraverso un bottone PHP 18
L [HTML] problema sfondo tutto schermo con immagine HTML e CSS 1
felino [Wordpress] Immagine di sfondo (sotto il template) WordPress 8
A [Javascript] Impostare immagine sfondo da checkbox, sito web Javascript 1
V javascript - cambiare immagine di sfondo di un div Javascript 3
R [Flash] Animare un testo con un' immagine sullo sfondo Windows e Software 7
Papalla CSS3 - immagine di sfondo con elementi che appaiono col mouse hover HTML e CSS 4
Fuego2806 Stampare dati Form su immagine di sfondo con html HTML e CSS 1
Fuego2806 [PHP] Stampare dati Form su immagine di sfondo con html PHP 70
Gregia Immagine con testo affianco (sfondo colore diverso) HTML e CSS 8
Zea problemi duplicazione immagine di sfondo HTML e CSS 3
M problema immagine di sfondo e risoluzione schermo HTML e CSS 1
R Sostiture il colore di sfondo di un'immagine con canvas e drawImage... dove sbaglio? Javascript 1
P link su immagine di sfondo HTML e CSS 1
L fpdf .. immagine di sfondo e posizionamento testo PHP 1
G Inserire un immagine di sfondo con un disegno base Photoshop 1
L Bottone con immagine di sfondo HTML e CSS 2
F Immagine che si autoingrandisce dallo sfondo Flash 2
voldemort Immagine di sfondo fissa con CSS HTML e CSS 1
A immagine sfondo casuale Javascript 13
G Realizzare un'immagine con sfondo trasparente con Photoshop Photoshop 3
mkrapfen immagine sfondo sito a tutto schermo Javascript 2
L problemi con l'immagine di sfondo da ripetere Webdesign e Grafica 1
V Stampare dati Form su immagine di sfondo PHP 8
M [Firefox/CSS] Problema immagine di sfondo centrata HTML e CSS 1
Angel0 Rotazione immagine di sfondo con css HTML e CSS 3
emanuelevt immagine di sfondo del div HTML e CSS 5
P Immagine sullo sfondo dietro il centro del sito HTML e CSS 4
A script apertura immagine su sfondo nero Webdesign e Grafica 1
T Immagine di sfondo menu applet Javascript 10
Ailinen Immagine sfondo sito Webdesign e Grafica 15
C creare sfocatura su una porzione dell'immagine di sfondo Flash 0
B Adattare tabella a immagine di sfondo con Dreamweaver Cs3 Webdesign e Grafica 3
I Immagine di sfondo tabella - NVU Webdesign e Grafica 9
S Immagine sfondo Flash 3
C Immagine di sfondo, ad un bordo. HTML e CSS 0
N Non riesco a centrare l'immagine di sfondo Webdesign e Grafica 9
H Immagine di sfondo a tabella: centrata e non affiancata Webdesign e Grafica 6
D Immagine di sfondo [era: help] HTML e CSS 11
I Immagine in sfondo di una classe che non compare. HTML e CSS 2
S fondere immagine con sfondo Webdesign e Grafica 3
J dreamweaver sfondo immagine Webdesign e Grafica 4
S Immagine di sfondo che cambia ad ogni accesso Javascript 2
J frontpage: mettere un'immagine di sfondo HTML e CSS 2
T Dividere un'immagine in 3 parti orizzontali e salvarle separatamente Photoshop 2

Discussioni simili