colore body con gradiente

[Paperino78]

Buongiorno, sto cercando di capire come realizzare lo sfondo del mio sito ma con effetto a sfumare, cioè con un gradiente. Di tutorial ne ho visti diversi ma il problema è che lo sfondo creato si ripete nel body e mi trovo quindi ad avere dei fastidiosi "tagli" dell'immagine. Come posso fare per ottenere uno sfondo a tutta pagina ma che inizi e finisca correttamente sfumando? In modo da non usare il repeat-x nei css. Sicuramente è una domanda già fatta ma non ho trovato risposta ancora.

Grazie

 

[TheTrigger]

Intendi i tagli ai bordi della pagina?
Aggiungi questa regola css..

body {
padding:0;
margin:0;
}

 

[Paperino78]

Non so dove ho parlato di bordi ma comunque non intendo quei bordi, il problema è lo sfondo del body che sfuma lungo tutto il body.

 

[TheTrigger]

Posta una screen o il codice... non si capisce..
Se imposti uno sfondo al body non vedo il perché non si dovrebbe propagare..

O magari hai bisogno di questo
http://www.colorzilla.com/gradient-editor/

 

[Paperino78]

Questo software lo conosco anche io e l'ho già usato, il mi problema è che se metto questo codice

background: rgb(30,87,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI3JSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQzJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjU2JSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgb(30,87,153) 0%, rgb(41,137,216) 27%, rgb(32,124,202) 43%, rgb(32,124,202) 56%, rgb(125,185,232) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(30,87,153)), color-stop(27%,rgb(41,137,216)), color-stop(43%,rgb(32,124,202)), color-stop(56%,rgb(32,124,202)), color-stop(100%,rgb(125,185,232))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(30,87,153) 0%,rgb(41,137,216) 27%,rgb(32,124,202) 43%,rgb(32,124,202) 56%,rgb(125,185,232) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(30,87,153) 0%,rgb(41,137,216) 27%,rgb(32,124,202) 43%,rgb(32,124,202) 56%,rgb(125,185,232) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(30,87,153) 0%,rgb(41,137,216) 27%,rgb(32,124,202) 43%,rgb(32,124,202) 56%,rgb(125,185,232) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgb(30,87,153) 0%,rgb(41,137,216) 27%,rgb(32,124,202) 43%,rgb(32,124,202) 56%,rgb(125,185,232) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */

uno a caso naturalmente come body mi da si lo sfondo blu sfumato ma solo per 370px x 350px quindi mi si ripete per due volte circa in quanto la pagina è più alta di 350px. Mi sapresti dare una mano? Lo so che è una stupidata ma io non ne vengo fuori, e non ho i mezzi per fare tutto questo con PS.

Grazie

 

[TheTrigger]

Basta che aggiungi

height: 100%;

E questo per evitare che si crei la scrollbar (100% + margine|padding = overflow)

margin:0;
padding:0;

 

[Paperino78]

Ho inserito i valori che mi hai dato nel body, ma purtroppo nessuna modifica. Lo sfondo è sempre spezzato.

 

[criric]

lo sfondo è spezzato probabilmete perche l'immagine che usi è spezzata

prova a postarla

 

[Paperino78]

Guarda, di immagini non ce ne sono è un semplice sfondo colorato che come hai potuto vedere qualche post indietro ha solo i colori in hex, o rgb. Quindi nessuna imamgine. Dal sito che mi hai postato tu puoi verificare che l'altezza massima sono 350 px quindi avendo un body decisamente più alto lo sfondo viene "moltiplicato" fino a renderlo al 100%.

 

[TheTrigger]

Avrai alcune regole css sbagliate..
Ho fatto una pagina e testato il codice, funziona..

 

[criric]

dei fastidiosi "tagli" dell'immagine

ho dedotto che stavi usando un immagine Chiedo venia

se usi i css3 e FIREFOX .. ho notato anchio

deve essere un bug di FIREFOX, con chrome si vede bene

 

[TheTrigger]

Prova ad aggiungere anche html { height:100%; }

 

[Paperino78]

Allora sono io che sono strano. Ho fatto una pagina html pulita. Importato css con i dati che mi hai scritto prima, ho inserito il codice dell'immagine e lo sfondo non era graduale ma praticamente a righe. Ti posto il codice e mi sai dire.

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="lolkittens" />
<link href="Senza nome 5.css" rel="stylesheet" type="text/css" />
	<title>Senza nome 5</title>
</head>

<body>
Weeeeeella

</body>
</html>

ecco il CSS

body {background: rgb(30,87,153); /* Old browsers */
height: 100%;
margin: 0;
padding: 0;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI1JSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM3JSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgyJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk4JSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgb(30,87,153) 0%, rgb(30,87,153) 25%, rgb(30,87,153) 37%, rgb(41,137,216) 82%, rgb(41,137,216) 98%, rgb(125,185,232) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(30,87,153)), color-stop(25%,rgb(30,87,153)), color-stop(37%,rgb(30,87,153)), color-stop(82%,rgb(41,137,216)), color-stop(98%,rgb(41,137,216)), color-stop(100%,rgb(125,185,232))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(30,87,153) 0%,rgb(30,87,153) 25%,rgb(30,87,153) 37%,rgb(41,137,216) 82%,rgb(41,137,216) 98%,rgb(125,185,232) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(30,87,153) 0%,rgb(30,87,153) 25%,rgb(30,87,153) 37%,rgb(41,137,216) 82%,rgb(41,137,216) 98%,rgb(125,185,232) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(30,87,153) 0%,rgb(30,87,153) 25%,rgb(30,87,153) 37%,rgb(41,137,216) 82%,rgb(41,137,216) 98%,rgb(125,185,232) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgb(30,87,153) 0%,rgb(30,87,153) 25%,rgb(30,87,153) 37%,rgb(41,137,216) 82%,rgb(41,137,216) 98%,rgb(125,185,232) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */
}

 

[Paperino78]

Prova ad aggiungere anche html { height:100%; }

Ho inserito questo in una pagina vuota e magicamente tutto ok. Poi l'ho fatto sulla mia pagina ed è tornato il problema. Devo avere qualcosa nei css che non funziona a dovere. Solo che capirlo per me è un'impresa.

 

[TheTrigger]

A me funziona bene con tutti i browser (Opera, FF, Chrome).
Assicurati che la tua pagina web rispetti gli standard (ormai html5)

ispazio.net/188151/ispazio-devresources-04-la-struttura-base-di-una-pagina-html-5

prettyscripts.com/code/html5/html5-basic-structure

 

[Paperino78]

A me funziona bene con tutti i browser (Opera, FF, Chrome).
Assicurati che la tua pagina web rispetti gli standard (ormai html5)

ispazio.net/188151/ispazio-devresources-04-la-struttura-base-di-una-pagina-html-5

prettyscripts.com/code/html5/html5-basic-structure

La pagina in questione è html 4.01 e funziona senza problemi. L'html 5 è il meglio, ma non è quello il problema. Credo che il problema sia il mio css, che però dovrò rivedere tutto, o capire da cosa dipende il problema.

Grazie lo stesso.