colore body con gradiente

Paperino78

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

Utente Attivo
3 Giu 2011
38
0
0
Intendi i tagli ai bordi della pagina?
Aggiungi questa regola css..
Codice:
body {
padding:0;
margin:0;
}
 

Paperino78

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

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
Questo software lo conosco anche io e l'ho già usato, il mi problema è che se metto questo codice
HTML:
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

Utente Attivo
3 Giu 2011
38
0
0
Basta che aggiungi
Codice:
height: 100%;

E questo per evitare che si crei la scrollbar (100% + margine|padding = overflow)
Codice:
margin:0;
padding:0;
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
lo sfondo è spezzato probabilmete perche l'immagine che usi è spezzata

prova a postarla
 

Paperino78

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

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
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
 
Ultima modifica:

Paperino78

Utente Attivo
30 Giu 2012
409
0
16
Milano
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.
HTML:
<!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
PHP:
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 */
}
 

TheTrigger

Utente Attivo
3 Giu 2011
38
0
0
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

Utente Attivo
30 Giu 2012
409
0
16
Milano
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
A [HTML] "Tonalita colore immagine del body> HTML e CSS 2
A Riprodurre uno schema colore Photoshop 15
P modifica colore A Hover link website . WordPress 2
Y Vorrei selezionare un colore di sfondo per una pagina web Javascript 0
A inserire variabile php colore in div html PHP 2
Cosina Cambio colore sfondo al click Javascript 2
felino Stampante Epson XP-322: nessuna traccia del colore nero! Hardware 6
L COLORE DETTAGLIO IN FOTO BIANCO E NERO - PHOTOSHOP Photoshop 0
A Aiuto php colore diverso PHP 10
felino Radio button e Bootstrap: modificare il colore di default! HTML e CSS 1
Y Colore sfondo testo Javascript 0
Y Esportare attributi taglia e colore fa Wordpress a Facebook E-Commerce 5
G Cambiare colore ad un record database mysql MySQL 0
R [Photoshop] funzione colore automatico Photoshop 0
Cosina [PHP] Impostare colore singolo elemento in fwrite PHP 2
F [Photoshop] come riempire un area selezionata su un layer trasparente con colore solido Photoshop 0
G Fullcalendar: modificare colore testo, backgroup e bordi per tutti gli eventi jQuery 3
P Colore testo variabile PHP PHP 5
O Allo scroll cambiare colore di sfondo jQuery 0
DaveCricket [WordPress] [PHP] Cambiare il colore del link di una pagina attiva WordPress 3
V Colore Font Php-Html PHP 1
Gregia Immagine con testo affianco (sfondo colore diverso) HTML e CSS 8
V Cambiare colore ad un button HTML e CSS 3
S impostare colore sfondo di ogni cella di una datagridview Visual Basic 1
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
E Pennello Sostituisci Colore Photoshop 13
M Colore testo .NET Framework 1
F Cambio colore immagine Photoshop 2
F Prolungamento colore logo HTML e CSS 1
filippino Sfumare immagine da colore a trsparente Photoshop 1
R Sostiture il colore di sfondo di un'immagine con canvas e drawImage... dove sbaglio? Javascript 1
F colore condizionale jQuery 11
E Problemi di colore backgroung HTML e CSS 1
I Colore di uno sfondo HTML e CSS 1
V Aiuto su Stile CSS cambiare colore ad un modulo Joomla 1
M Colore bordo cella (tabelle HTML) HTML e CSS 1
R Vertex Template (jommla2.5): cambiare colore dell'header Joomla 12
A Cambiare colore bottone app Android Sviluppo app per Android 1
Marcolotto [HTML] Colore bordo tabella HTML e CSS 2
Trapano Cambiare colore ad un td se il campo XXX è = a XXX PHP 10
S Grafico in Chart.js colonne di colore diverso PHP 0
I window.open a seconda del colore del link jQuery 1
Shyson Cambiare colore al pulsante button HTML e CSS 6
I cambio colore in base alla scelta nel form select PHP 6
D cambiare colore al testo il float PHP 1
Z Cambiare colore alla finestra degli avvisi CMS (Content Management System) 1
C Gestione cambio colore dei link con css Javascript 1
Shyson Cambiare colore font nel campo Javascript 26
G Variazione del colore di sfondo di un link al passaggio mouse Javascript 5
S Linee tabelle di vario colore HTML e CSS 4

Discussioni simili