http://www.guardiacostiera.it/
notate lo sfondo?
Non è una semplice immagine sfumata con repeat-x...la particolarità è che se faccio lo scroll della pagina il grado della sfumatura è sempre uguale.
E' come se facessi lo scroll del solo contenuto e lo sfondo resta fisso.
come si fa?
Quella è un immagine ad alta risoluzione.....se ad esempio imposti la risoluzione del tuo monitor a 2048 x 1536 puoi notare che l'immagine ha un altezza inferiore a 1536.Cmq se vuoi creare un immagine di sfondo,per prima cosa crea la tua immagine ad una risoluzione alta,tipo 1600x1200 ottimizzata e inserisci il sequente codice html+css:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>New Project</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="Main_Structure.css">
</head>
<body>
<div class="Container">
[img]Background.jpg[/img]
</div>
</body>
</html>
CSS:
body{
margin: 0px 0px auto 0px;
}
.Container{
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
}
[OT=X i Mod]:
Ma come mai avete messo su un forum se le risposte addirittura non arrivano??oO
Da parte mia grazie 1000. Era più curiosità che necessità di applicare la soluziione al mio sito.
In realtà basta ragionarci un minimo e ci arrivi piu o meno....cmq esistono sfondi piu complessi con il quale ho difficolta anche io,quindi ben venga l'aiuto tra tutti
Non ti stai sbagliato! E proprio così!Originariamente inviato da pandasonic
E' come se facessi lo scroll del solo contenuto e lo sfondo resta fisso.
come si fa?
Guarda il css di quella pagina che riguarda il body:
La proprietà che ti ho evidenziato permette di mantere lo sfondo fisso mentre scorri la pagina.codice:http://www.guardiacostiera.it/css/global.css body{ font-family: Verdana,Arial,Helvetica,sans-serif; font-style: normal; font-variant: normal; font-weight: normal; font-size: 100%; line-height: normal; font-size-adjust: none; font-stretch: normal; color: rgb(0, 0, 0); margin-top: 0px; margin-right-value: 0px; margin-bottom: 0px; margin-left-value: 0px; margin-left-ltr-source: physical; margin-left-rtl-source: physical; margin-right-ltr-source: physical; margin-right-rtl-source: physical; padding-top: 0px; padding-right-value: 0px; padding-bottom: 0px; padding-left-value: 0px; padding-left-ltr-source: physical; padding-left-rtl-source: physical; padding-right-ltr-source: physical; padding-right-rtl-source: physical; background-color: rgb(0, 51, 102); background-image: url(../images/css/bg_grad_1.jpg); background-attachment: fixed; }
In poche parole quindi i due metodi permettono di fare la stessa cosa apllicata ad elementi diversi??
Con il codice che hai inserito ottieni un'immagine in una pagina web che non è inserita come sfondo ma come elemento. Sono due cose diverse.
Il discorso che hai fatto sulla risoluzione non è assolutamente sbagliato, conviene impostare una risoluzione abbastanza elevata oppure, se possibile, creare l'immagine di sfondo usando le funzioni di un linguaggio lato server che permette di creare ogni volta uno sfondo diverso in base alla risoluzione del client che si collega, però è una soluzione un po' eccessiva. E' più seplice ed elastico quello che hai detto tu, cioè di impostare un'immagine di sfondo ad una risoluzione fissa.
Si ma resta il fatto che qualcosa non torna.....
Per citare un sito gia postato....Adobe....come azz hanno fatto a realizzare uno sfondo del genere?Nemmeno modificando la risoluzione del mio monitor riesco a trovare qualche errore nell'immagine:maLOL: .
Ho provato a fare un immagine con la massima risoluzione del mio monitor(ossia 2048x1536 px) inserendo questo codice css per il body:
body {
background-attachment: fixed;
background-image: url(file:///C|/Documents%20and%20Settings/Maxill/Desktop/Prova.gif);
background-repeat: no-repeat;
}
Ma lo sfondo ad una risoluzione del monitor (1400x1050 px) si presenta cosi:
Immagine di Partenza:
Risultato Ottenuto:
Qui mi sa che ci vuole qualche esperto del forum lol....
EDIT:
Ovviamente non è l'altezza ad essere un problema in quanto essendo l'immagine un gradiente presenta una variazione di colore solamente sulla larghezza.
L'immagine nella pagina web della Adobe è allineata al centro e in alto con questi parametri dei css:
E normale che quando cambi risoluzione o ridimensioni la pagina del browser sembra che la foto si adatti alle nuove condizioni... in realtà è sempre ferma al centro, in alto.codice:body { background-image: url(/newsletters/edge/images/template/background_page.gif); background-position: top center; padding: 0; margin: 0; }
Si è sempre centrata in alto pero cambiando risoluzione le due colonne di gradienti sia a destra che a sinistra diminuiscono la loro larghezza^^.....cmq adesso ho capito,grazie.Ultima curiosita,come hai fatto a reperire il css se anche provandoci non mi fa accedere e qual'è il nome del css in questo caso??
Permessi di invio
Rispondi quotando
