Joomla.it Forum
Joomla! 2.5 (versione con supporto terminato) => Joomla! 1.6/1.7/2.5 => I Template di Joomla 1.6/1.7/2.5 => : ira83 07 Feb 2012, 03:15:30
-
Ciao a tutti,
ho creato uno sfondo sfumato con questo tool: http://gradients.glrzad.com/
e ho inserito il codice nel css in
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?
-
no-repeat senza la 's'
caio
-
si ok errore di battitura qui, sul css è corretto ovviamente
-
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
-
eh infatti diciamo che quella era la mia "ultiama spiaggia" eheh... purtroppo non ho settato nessuna altezza o simili..
allego il css...
@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;
}
-
hai un link?
-
no non è online.. se vuoi lo metto sul mio server e ti passo il link in pm...
-
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
-
ti ho inviato un pm con l'indirizzo del mio server
-
direi che basta cambiare bottom con top sostituisci la tua dichiarazione con questa:
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)
);
-
non cambia... cambia solo qualche percenuale... ad ogni modo è già qualcosa meglio...
-
non so dove ho preso quei valori, intendevo questi
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???