Accedi per seguire   
Seguaci 0
the doctor

[html] Impostare un'immagine come sfondo

Iniziato da the doctor,

21 messaggi in questa discussione

Inviato

Salve a tutti.

Oggi ho cominciato a studiare il linguaggio html :leggi: :leggi:

Sebbene i tag siano abbastanza facili da capire e memorizzare, ho un problema:

come faccio ad inserire un'immagine di sfondo che ho hostato? faccio un esempio:

<body background="immagine">

al posto di immagine, che ci devo scrivere per far sì che mi appaia come sfondo un'immagine che ho hostato?

Grazie mille per il tempo che perderete(spero) con un principiante come me.. :)

:P:P

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Devi metterci il nome dell'immagine :)

in questo modo se il tuo file html è nello stesso percorso dell'immagine:

<body background="foto001.jpg">

Invece in quest'altro se si trova in un'altra cartella (ad un livello superiore)

<body background="immagini/foto001.jpg">

foto0015bd.jpg

Chiaramente sul server dovrai fare l'upload esattamente come specificato nel codice (con i nomi delle cartelle esatti quindi) altrimenti l'immagine non sarà visualizzata

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato (modificato)

Uffi, Kuma, forse non mi sono spiegato..posso mettere come sfondo un'immagine che ho hostato con imagesHack??

Un'altra cosa però non riesco a capirla: perchè gli attributi dei tag riesco a inserirli anche senza metterli tra virgolette? E perchè i tag funzionano anche se alla fine non li chiudo? Grazie..

Modificato da the doctor

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Uffi, Kuma, forse non mi sono spiegato..posso mettere come sfondo un'immagine che ho hostato con imagesHack??

Un'altra cosa però non riesco a capirla: perchè gli attributi dei tag riesco a inserirli anche senza metterli tra virgolette? E perchè i tag funzionano anche se alla fine non li chiudo? Grazie..

Diciamo che i browser accettano anche i valori senza virgolette, ma l'impostazione più corretta è proprio quella di mettere le virgolette. Se fai analizzare la tua pagina con valori senza virgolette da un validatore HTML online, rischi di ottenere una serie di errori. E' soprattutto un problema di forma, non tanto di funzionalità.

Alcuni tag invece non prevedono proprio il tag di chiusura:

<a href="http://www.wininizio.it/">Visita WinInizio.it</a>

Il tag sopra crea un collegamento ipertestuale e deve necessariamente essere chiuso, altrimenti tutto ciò che lo segue entra nel collegamento.

<img src="immagini/miafoto.png">

Il tag IMG non ha tag di chiusura perché è un segnaposto per un'immagine, quindi al browser basta sapere in che punto collocare l'immagine richiamata dal tag.

La forma più corretta per "chiudere" un tag del genere è la seguente:

<img src="immagini/miafoto.png" />

Osserva lo slash alla fine: indica che il tag inizia e finisce lì, quindi il parser HTML del browser non deve perdere tempo a cercare </img>. Attenzione, però: i browser anteriori alla 4a generazione potrebbero avere problemi nell'interpretare una forma del genere. Con i browser oggi in uso (compresi quelli per XHTML nei cellulari) non hai problemi.

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Al posto del nome, metti l'URL dell'immagine...

<body background="http://...../ciao.jpg">

Non avrei saputo spiegartelo meglio di Zip... :up1:

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Uffi, Kuma, forse non mi sono spiegato..posso mettere come sfondo un'immagine che ho hostato con imagesHack??

Un'altra cosa però non riesco a capirla: perchè gli attributi dei tag riesco a inserirli anche senza metterli tra virgolette? E perchè i tag funzionano anche se alla fine non li chiudo? Grazie..

Quoto in pieno quello che suggerisce ZipGenius.

Ti consiglio vivamente di utilizzare la sintassi imposta da XHTML, che renderà il codice della pagina HTML più coerente, e più facilmente compatibile con i vari browser.

Il fatto che alcuni browser siano "più" clementi di altri nell'interpretare l'HTML non è un vantaggio...

Io, ad esempio, tutte le mie pagine Web le scrivo in XHTML quindi con i valori dei parametri tra doppi apici, con i tag annidati correttamente, e con i tag singoli (come <img...>) chiusi "alla XML" (<img... />).

Certo che puoi mettere come indirizzo quello di imageshack, ma non è una buona prassi...

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Certo che puoi mettere come indirizzo quello di imageshack, ma non è una buona prassi...
Non lo è per niente... :up1:

E comunque come dice Prozac, è fondamentale usare bene l'indentazione e scrivere sempre del codice ordinato e coerente...

Quindi non usare Front Page... :):P:P:wub::P;)

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Certo che puoi mettere come indirizzo quello di imageshack, ma non è una buona prassi...

Non è buona prassi perché ImageShack non tollera l'uso continuato della sua banda di traffico: un giorno o l'altro ti ritroveresti senza immagine di sfondo, quindi le immagini JPEG, GIF e PNG che compongono una pagina HTML in maniera stabile dovrebbero risiedere nello stesso server che ospita la pagina HTML. ImageShack è utile solo quando vuoi mostrare immagini in modo occasionale come le fotografie, e devi comunque seguire le loro istruzioni per evitare di "succhiare" la loro banda.

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

un problemino simile che mi sono trovato ad affrontare ed a cui neancora ho trovato risposta (forse per la mia incompetenza in materia):

-come faccio a mettere un immagine di sfondo piccola a tutto schermo senza che si ripeta?

-oppure come faccio a mettere un'immagine di sfondo piccola che rimanga a centro schermo (anche in questo caso senza che si ripeta)?

-come faccio a far si che di sfondo a una tabella ci sia un'immagine e non solo un colore?

...potrebbe essere abbastanza banale la soluzione, ma io non ci arrivo...(forse con i css...magari mettendo z-index a -1, no??)

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Grazie a tutti per le esaurienti spiegazioni che mi avete fonito, mi siete stati molto utili..stasera forse comincio a studiare i fogli di stile..mi vedi avvilito.. :sigh: :sigh:

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Spiug disse: un problemino simile che mi sono trovato ad affrontare ed a cui neancora ho trovato risposta (forse per la mia incompetenza in materia):

come faccio a mettere un immagine di sfondo piccola a tutto schermo senza che si ripeta?

Con i fogli di stile:

body {background-image: url(sfondo.gif); background-repeat: none:}

Spiug disse: oppure come faccio a mettere un'immagine di sfondo piccola che rimanga a centro schermo (anche in questo caso senza che si ripeta)?

Uhm, questa la vedo più dura, dovrei fare qualche prova... :):P

Spiug disse: come faccio a far si che di sfondo a una tabella ci sia un'immagine e non solo un colore?

Sempre coi fogli di stile, specifiche una classe per la tabella nel codice HTML:

<table class="tabellaConSfondo">

e quindi nel foglio di stile dovrebbe essere sufficiente fare in questo modo

table.tabellaConSfondo {background-image: url(sfondo.gif);}

Questo però verificalo poichè non ho l'abitudine di mettere sfondi alle tabelle, anzi, se la tabella non serve per il layout, ti sconsiglio di mettere immagini di sfondo. ;-) ;)

P.S. non mi funzionavano i quote per un mio errore, adesso mi sa fatica rimettere tutto come prima... :P:wub::P

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Con i fogli di stile:

body {background-image: url(sfondo.gif); background-repeat: none:}

Ne sei sicuro?! Dove dovrei mettere questo codice?

Nell'head tra 

<style type="text/css"><!--body {background-image: url(sfondo.gif); background-repeat: none;}--></style>

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Sì, si tratta di una notazione che riguarda i CSS, quindi o lo metti tra i tag <style> e </style>, oppure lo metti in un file esterno e lo richiami dalla pagina HTML. ;-) :)

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

...uhm...l'ho provato ma me lo ripete... :)

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

...uhm...l'ho provato ma me lo ripete... :P

Ma tu hai tolto l'indicazione dal tag <body>, vero? :dia:

In pratica, non devi mettere l'attributo background nel tag <body>... se invece hai già provveduto a rimuovere l'attributo, allora posta il codice che vediamo il da farsi. ;-) :)

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Uffi...me lo ripete...

...dov'è che sbaglio...

...ti ho postato il codice delle parti interessate, così finalmente puoi divertirti a cercare l'errore... (B)

Mappa.txt

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Sono un pollo io... :P :P al posto di none, metti no-repeat, e vai tranquillo!!! :wub::P:)

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Pollo... :P:P:wub::P

...bene, ma per metterla a tutto schermo?! Si può?? :)

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Pollo... :P:P:wub::P

...bene, ma per metterla a tutto schermo?! Si può?? :)

Dipende da quanto è grande l'immagine di sfondo... adattare l'immagine non conviene, anche perchè non sai la risoluzione del visitatore del tuo sito, e se l'immagine è più piccola della risoluzione utilizzata, allora l'immagine dovrà essere ingrandita con conseguente perdita di qualità. Inoltre, non so se è possibile farlo...

;)

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Si, lo sò che non si possono ingrandire più di tanto altrimenti viene una schifezza, comunque sarebbe una cosa interessante, dato che non ci sarebbe più da porsi il problema se fare la pagina per una risoluzione 800x600 o per altre maggiori <_<

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Inviato

Beh, secondo me le immagini di sfondo vanno usate con cautela, nel senso che uno sfondo dev'essere funzionale all'aspetto generale del sito, altrimenti si può pure omettere. E in ogni caso, un'immagine non ripetuta come sfondo, se azzeccata, non sta affatto male. ;-) :)

Condividi questo messaggio

Link di questo messaggio
Condividi su altri siti

Crea un account o accedi per lasciare un commento

Devi essere un utente registrato per partecipare

Crea un account

Iscriviti per un nuovo account nella nostra community. È facile!


Registra un nuovo account

Accedi

Sei già registrato? Accedi qui.


Accedi Ora
Accedi per seguire   
Seguaci 0
Vai alla lista Discussioni XHTML e HTML