applicare uno sfondo tramite css

**francesco321654** · 10-01-2006, 15:05

ciao a tutti
scusate come applico uno sfondo tramite css?
mi spiego meglio
ho creato il mio foglio di stile partendo da folgli di stile incorporati e man mano che andavo avnti con le pagine sono andato avanti per esigenze specifiche
ma non mi sono mai curato del body
mentre prima mettevo a posto le cose cosi direttamente in ogni pag:
<body background="/cartella/immagine.jpg">
a questo punto mi trovo in queste condizioni
adesso?

<style type="text/css">
body{}
table{margin:0;padding:0}
table{font: 100.01% =Trebuchet MS=,Arial,sans-serif}
tr#navigation{background-color: #00CC99;border-bottom: 1px solid #006600;padding-left: 20px}
tr#navigation ul{list-style-type: none;margin: 0;padding: 0}
tr#navigation li{display: inline;margin: 0;padding:0}
tr#navigation li a{text-decoration: none;border: 1px solid #006600;padding: 0px 0.3em;
background: #990000;color: #ffcc66}
tr#navigation li a:hover{background-color: #ffffff}
tr#navigation li#activelink a{border-bottom: 1px solid #fff;background-color: #ffffff;color: #0000ff}
tr#navigation_2{background-color: #00CC99;border-bottom: 1px solid #006600;padding-left: 20px}
tr#navigation_2 ul{list-style-type: none;margin: 0;padding: 0}
tr#navigation_2 li{display: inline;margin: 0;padding:0}
tr#navigation_2 li a{text-decoration: none;border: 1px solid #006600;padding: 0px 0.3em;
background: #990000;color: #ffcc66}
tr#navigation_2 li a:hover{background-color: #ffffff}
tr#navigation_2 li#activelink a{border-bottom: 1px solid #fff;background-color: #ffffff;color: #0000ff}
tr#content div#intestazione {color: #0000ff}
tr#content div#intestazione_2 {color: #990000}
tr#content div#pretitolo {font-family:Comic Sans MS;Color:#006699}
tr#content div#Titolo_Spettacolo {font-family:Book Antiqua;Color:#FF0000;font-size:60px;}
tr#content div#Titolo_Spettacolo_2 {font-family:Comic Sans MS;Color:#0033CC;font-size:60px;}
tr#content div#Titolo_Spettacolo_3 {font-family:Comic Sans MS;Color:#990033;font-size:40px;}
tr#content div#commento{font-family:Trebuchet MS;Color:#FF0000;font-size:20px;}
tr#content div#commento_1{font-family:Verdana;Color:#9933FF;font-size:50px;}
tr#content div#commento_2{font-family:Verdana;Color:#990000;font-size:30px;}
tr#content h1#ducale{font-family:Verdana;Color:#990000;font-size:30px;}
tr#content li {font-family:Verdana, Arial, Helvetica, sans-serif}
tr#content p {font-family:Trebuchet MS}
</style>
Spero di non aver fatto confusione come al solito

**pierofix** · 10-01-2006, 15:14

Per applicare uno sfondo si deve utilizzare la proprietà 'background':

- http://www.w3.org/TR/CSS21/colors.ht...def-background

Il seguente esempio piazza un'immagine di sfondo ("sfondo.png") al centro della finestra senza ripeterla:

codice:

body {
   background:#fff url("sfondo.png") no-repeat 50% 50%
}

Occhio, comunque, a non duplicare le informazioni. Guarda questa struttura:

codice:



   Questo è un paragrafo.
</p>

Se tu specifichi che il colore dei paragrafi debba essere rosso, non serve che lo torni a specificare anche per gli em contenuti nei paragrafi. Ecco che invece di

codice:

p { color:red }
p em { color:red }

è sufficiente

codice:

p { color:red }

**francesco321654** · 10-01-2006, 15:23

grazie piero
dimmi se ho capito bene
esempio:
body {background:#fff url("/cartellaimmagini/immagine.png") repeat }
giusto?

**pierofix** · 10-01-2006, 15:29

Sì, la sintassi è corretta.

Se vuoi che l'immagine "/cartellaimmagini/immagine.png" sia ripetuta come sfondo del body, allora anche il senso è corretto.

Per ottimizzare il codice potresti eliminare repeat dal valore, in quanto è tale per default. Se non ti interessa nemmeno specificare che lo sfondo, in caso di mancato caricamento dell'immagine, sia bianco, allora ti conviene scrivere direttamente così:

codice:

body { background-image:url("/cartellaimmagini/immagine.png") }

**francesco321654** · 10-01-2006, 15:43

ok grazie ancora piero
fatto ora pero ho un'altra domanda
la sintassi cambia da un folgio di stile incorporato ad uno collegato?
:master:

**francesco321654** · 10-01-2006, 15:45

altra cosa
mi conviente secondo te mettere anche lo stile di footer e header nel foglio di stile ho va bene anche se li lascio cosi con lo stile in linea visto che si tratta di due file inc?

**pierofix** · 10-01-2006, 15:52

Originariamente inviato da francesco321654
la sintassi cambia da un folgio di stile incorporato ad uno collegato?

No, in linea di principio la sintassi non cambia. Da cosa sorge questo tuo dubbio?

**pierofix** · 10-01-2006, 15:54

Originariamente inviato da francesco321654
mi conviente secondo te mettere anche lo stile di footer e header nel foglio di stile ho va bene anche se li lascio cosi con lo stile in linea visto che si tratta di due file inc?

Dipende dalle tue esigenze. Io sono solito mantenere una coerenza in queste cose: gestisco tutto tramite fogli di stile esterni.

E' proprio in quella forma che, secondo me, offrono il meglio delle loro potenzialità.

**francesco321654** · 10-01-2006, 16:01

da nulla in particolare e la prima volta che aplico i css e sai come siamo noi verginelli alla prima volta

comuque levami ogni dubbio
il foglio di stile posso farlo cosi:
<style type="text/css">
body{background-image: url("./burattini_Genova_imagini/Acquarello_15.jpg")}
table{margin:0;padding:0}
table{font: 100.01% =Trebuchet MS=,Arial,sans-serif}
tr#navigation{background-color: #00CC99;border-bottom: 1px solid #006600;padding-left: 20px}
tr#navigation ul{list-style-type: none;margin: 0;padding: 0}
tr#navigation li{display: inline;margin: 0;padding:0}
tr#navigation li a{text-decoration: none;border: 1px solid #006600;padding: 0px 0.3em;
background: #990000;color: #ffcc66}
tr#navigation li a:hover{background-color: #ffffff}
tr#navigation li#activelink a{border-bottom: 1px solid #fff;background-color: #ffffff;color: #0000ff}
tr#navigation_2{background-color: #00CC99;border-bottom: 1px solid #006600;padding-left: 20px}
tr#navigation_2 ul{list-style-type: none;margin: 0;padding: 0}
tr#navigation_2 li{display: inline;margin: 0;padding:0}
tr#navigation_2 li a{text-decoration: none;border: 1px solid #006600;padding: 0px 0.3em;
background: #990000;color: #ffcc66}
tr#navigation_2 li a:hover{background-color: #ffffff}
tr#navigation_2 li#activelink a{border-bottom: 1px solid #fff;background-color: #ffffff;color: #0000ff}
tr#content div#intestazione {color: #0000ff}
tr#content div#intestazione_2 {color: #990000}
tr#content div#pretitolo {font-family:Comic Sans MS;Color:#006699}
tr#content div#Titolo_Spettacolo {font-family:Book Antiqua;Color:#FF0000;font-size:60px;}
tr#content div#Titolo_Spettacolo_2 {font-family:Comic Sans MS;Color:#0033CC;font-size:60px;}
tr#content div#Titolo_Spettacolo_3 {font-family:Comic Sans MS;Color:#990033;font-size:40px;}
tr#content div#commento{font-family:Trebuchet MS;Color:#FF0000;font-size:20px;}
tr#content div#commento_1{font-family:Verdana;Color:#9933FF;font-size:50px;}
tr#content div#commento_2{font-family:Verdana;Color:#990000;font-size:30px;}
tr#content h1#ducale{font-family:Verdana;Color:#990000;font-size:30px;}
tr#content li {font-family:Verdana, Arial, Helvetica, sans-serif}
tr#content p {font-family:Trebuchet MS}
</style>
salvarlo come style.css
e poi in head
metto
<link rel=stylesheet href="style.css" type="text/css">
Giusto?

**pierofix** · 10-01-2006, 16:14

Il file CSS non deve contenere elementi di markup (X)HTML, quindi il tag <style> non deve comparire.

Se stai usando XHTML, la sintassi corretta per il tag link è la seguente:

codice:

<link type="text/css" rel="stylesheet" href="style.css" />

P.S. Un consiglio: cerca di essere più ordinato quando scrivi codice; potresti ad esempio usare le indentazioni per dare più leggibilità e respiro ai tuoi listati.

Discussione: applicare uno sfondo tramite css

Strumenti discussione

Ricerca discussione

Visualizza

applicare uno sfondo tramite css

Permessi di invio