errore sfondo

[ira83]

Ciao a tutti,

ho creato uno sfondo sfumato con questo tool: http://gradients.glrzad.com/

e ho inserito il codice nel css in

Codice: [Seleziona]

body{
background-image: linear-gradient(bottom, rgb(45,145,249) 37%, rgb(72,174,255) 69%);
background-image: -o-linear-gradient(bottom, rgb(45,145,249) 37%, rgb(72,174,255) 69%);
background-image: -moz-linear-gradient(bottom, rgb(45,145,249) 37%, rgb(72,174,255) 69%);
background-image: -webkit-linear-gradient(bottom, rgb(45,145,249) 37%, rgb(72,174,255) 69%);
background-image: -ms-linear-gradient(bottom, rgb(45,145,249) 37%, rgb(72,174,255) 69%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.37, rgb(45,145,249)),
    color-stop(0.69, rgb(72,174,255))
);
}
solo che è corretto sino ad un certo punto (pochi centimetri dal fondo), e poi riparte....come se si ripetesse... cosi, per togliermi la curiosità ho inserito no-repeats ma nulla da fare...

come posso risolvere?

[webbati]

no-repeat senza la 's'

caio

[ira83]

si ok errore di battitura qui, sul css è corretto ovviamente

[webbati]

meglio così, anche se in realtà non dovrebbe centrare nulla il repeat con i gradienti, secondo me o hai impostato un'altezza fissa del body o in una qualche maniera il body rimane più piccolo dell'intero html quindi riparte la sfumatura

[ira83]

eh infatti diciamo che quella era la mia "ultiama spiaggia" eheh... purtroppo non ho settato nessuna altezza o simili..


allego il css...

Codice: [Seleziona]

@charset "utf-8";
ul{
list-style-type: none;
}


.clear {
clear: both;
}


a img {border: none; }


html{
color:#545247;
font-size:12px;
font-family: Tahoma, Arial, Helvetica, sans-serif;
}


html a{
color:#545247;
}


html a:hover{
color:#dddddd;
background:#000;
}


body {


background-image: linear-gradient(bottom, #D1BEDA 6%, #2A2A27 100%);
background-image: -o-linear-gradient(bottom, #D1BEDA 6%, #2A2A27 100%);
background-image: -moz-linear-gradient(bottom, #D1BEDA 6%, #2A2A27 100%);
background-image: -webkit-linear-gradient(bottom, #D1BEDA 6%, #2A2A27 100%);
background-image: -ms-linear-gradient(bottom, #D1BEDA 6%, #2A2A27 100%);


background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.06, #D1BEDA),
color-stop(1, #2A2A27)
);


}


body a{
color:#262520;
text-decoration:none;
}


.module fieldset{
border:none;
}

.moduletable fieldset{
border:none;
}








#all{
width:1000px;
margin: 0 auto;
background-image: url(../images/bg.png);
}






.center99{
position:relative;
margin: 0 auto;
top:295px;
}
.menu{
background: #dad8cd;
margin:0 auto;
width:1000px;
border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
}


.menu2 {
height:30px;
font-size:1.2em;
}
.menu2 ul{
display:inline;

}

.menu2 li{
padding-left:50px;
padding-right:0px;
display:inline;
padding-bottom:15px;
background: no-repeat top left url('../images/bar-c.png');
}

.menu2 li a{
position: relative;
top:7px;
}


.body9{
position:relative;
top:15px;
background: #fff;/*dad8cd*/
margin:0 auto;
width:1000px;
border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;


}
.body99{
position:relative;
padding-top:20px;
padding-left:20px;
padding-right:20px;
padding-bottom:20px;
}

.componentheading{
margin-right:-1px;
margin-left:-1px;
height:22px;
padding-top:6px;
padding-left:5px;
font-weight:normal;
font-size:14px;
text-transform:uppercase;
color:#aaa9a0;
background: no-repeat bottom right url('../images/title.png');
margin-bottom:7px;
font-family:"Times New Roman", Times, serif;
}


.contentheading{
color:#36352e;
font-weight:bold;
}

.small, .createdate{
font-size:10px;
font-style:italic;
}

.crediti{


position:relative;
background: #dad8cd;



width:1000px;
border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;


}

[webbati]

hai un link?

[ira83]

no non è online.. se vuoi lo metto sul mio server e ti passo il link in pm...

[webbati]

prima di star li a a farti lavorare per niente potresti provare a fare l'inverso, cioè definendo la dimensione del body al 100% , se non cambia nulla mandami il link che ci guardo meglio.
ciao

[ira83]

ti ho inviato un pm con l'indirizzo del mio server

[webbati]

direi che basta cambiare bottom con top sostituisci la tua dichiarazione con questa:

Codice: [Seleziona]




body {

height: 100%;
background-image: linear-gradient(top, #D1BEDA 6%, #2A2A27 100%);
background-image: -o-linear-gradient(top, #D1BEDA 6%, #2A2A27 100%);
background-image: -moz-linear-gradient(top, #D1BEDA 6%, #2A2A27 100%);
background-image: -webkit-linear-gradient(top, #D1BEDA 6%, #2A2A27 100%);
background-image: -ms-linear-gradient(top, #D1BEDA 6%, #2A2A27 100%);


background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.06, #D1BEDA),
    color-stop(1, #2A2A27)
);




[ira83]

non cambia... cambia solo qualche percenuale... ad ogni modo è già qualcosa meglio...

[webbati]

non so dove ho preso  quei valori, intendevo questi

Codice: [Seleziona]



body{
height: 100%;
background-image: linear-gradient(top, rgb(45,145,249) 37%, rgb(72,174,255) 69%);
background-image: -o-linear-gradient(top, rgb(45,145,249) 37%, rgb(72,174,255) 69%);
background-image: -moz-linear-gradient(top, rgb(45,145,249) 37%, rgb(72,174,255) 69%);
background-image: -webkit-linear-gradient(top, rgb(45,145,249) 37%, rgb(72,174,255) 69%);
background-image: -ms-linear-gradient(top, rgb(45,145,249) 37%, rgb(72,174,255) 69%);

background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0.37, rgb(45,145,249)),
    color-stop(0.69, rgb(72,174,255))
);
}


ad ogni modo, ora io lo vedo bene, non ricomincia la sfumatura come prima, o no???