Adattare l'immagine di sfondo alla finestra del browser

02-07-2012, 01.54.17

Ciao a tutti!!!
Ho un problema con un codice HTML.
premetto che non sono proprio una cima (diciamo che me la cavicchio un po'

)
il problema è questo:
sto cercando di creare un sito per una sorta di fumetteria online diciamo...(appena cominciato e già mi sono bloccata)
Ho messo un'immagine di sfondo che vorrei si adattasse alla finestra del browser perchè ho notato che lavorando su due pc con una risoluzione diversa l'immagine si vede diversamente.
per esempio nel portatile me la taglia mentre nel fisso me la fa vedere quasi completa.
Il codice che ho creato fin'ora è questo:

Codice HTML:

<html>
<head>
 <title> Fumetteria </title>
</head>

<body style="background-image: url([url]http://www.animebox.eu/wallpapers/d/3646-6/black+lagoon+-+006.jpg);[/url]
             background-attachment:fixed;">
<table align='center' width='50%' border ='1'>
<tr><td><p><font size='8' font color='blue'> ciao</font></p></td></tr>
<tr><td> <p><font size='8' font color='blue'> come stai?</font></p></td></tr>
</table>
</body>
</html>

La mia domanda in sostanza è:
- è possibile adattare lo sfondo alla finestra del browser mantendendo però questa stringa di codice

Codice HTML:

<body style="background-image: url(http://www.animebox.eu/wallpapers/d/3646-6/black+lagoon+-+006.jpg);
             background-attachment:fixed;">

che mi permette di far scorrere il testo sullo sfondo senza però che questo venga ripetuto?

grazie a tutti quelli che vorranno dedicare un po di tempo al mio problema

**karl94** · 02-07-2012, 02.04.20

Anzitutto qualche consiglio sul codice HTML: metti una dichiarazione di doctype e usa codice moderno, non del secolo scorso. Quindi non usare le tabelle per l'impaginazione e non usare l'elemento font. Per curare l'aspetto della pagina usa il CSS (quello che hai per esempio scritto all'interno dell'attributo style per assegnare l'immagine di sfondo). Propriio le ultime specifiche del CSS mettono a disposizione una nuova proprietà per ridimensionare le immagini di sfondo, anche in base alla grandezza del contenitore. Hai quindi due possibilità:

distorcere l'immagine a forzare altezza e larghezza in modo che eguaglino quelle del contenitore o
ingrandire o ridurre l'immagine mantenendo le proporzioni, in questo caso però qualora le proporzioni dell'immagine non siano le medesime dell'elemento contenitore puoi scegliere di tagliare le parti in eccesso, senza lasciare nessuna parte del contenitore scoperta oppure lasciare una porzione del contenitore scoperta.

La proprietà in questione è background-size, con una piccola ricerca trovi diversi esempi che ti mostrano come funziona.

02-07-2012, 21.57.27

le tabelle che ho messo sono solo una prova per vedere se l'immagine mi si ripeteva e la dichiarazione di doctype ce l'ho solo non l'ho copiata perchè per la mia domanda non era fondamentale

02-07-2012, 21.58.33

comunque mi potresti scrivere il codice del css da aggiungere per entrambe le possibilità?? e mi puoi dire in che posizione li devo mettere??

Discussione: Adattare l'immagine di sfondo alla finestra del browser

LinkBack

Strumenti discussione

Display

Adattare l'immagine di sfondo alla finestra del browser

Regole di scrittura