Adattare Sfondo pattern allo schermo.

[personalfreedom]

Sto realizzando un sito web in cui ho impostato lo sfondo tramite una trama pattern. A differenza di un immagine, in cui si usa la proprietà fixed e si imposta la larghezza in %, non riesco a capire come fare per adattare l'immagine di sfondo (realizzata tramite pattern) alla risoluzione dello schermo. L'immagine pattern che uso al momento la ripeto per tutto il tag body. Se servisse qualche altra informazione chiedete pure . Vorrei poter utilizzare solamente i CSS per risolvere il problema, senza andare a inserire script di jquery, javascript e via dicendo.

[giggi1991]

se si tratta di una texture allora ti basta inserire nei css

body { background-image:url('tuaimmagine.gif'); background-repeat:repeat; }

[personalfreedom]

Originariamente inviato da giggi1991
se si tratta di una texture allora ti basta inserire nei css

body { background-image:url('tuaimmagine.gif'); background-repeat:repeat; }

quello serve per ripetere l'immagine, cosa che ho già fatto. A me servirebbe invece capire tramite i css in che modo regolo lo sfondo pattern di un sito in modo tale che se passo da una risoluzione all'altra il sito web venga adattato automaticamente senza che venga allargato ne stretto.

[giggi1991]

Credo che hai proprio bisogno di Javascript se si tratta di un'immagine singola

[giggi1991]

Si infatti non mi è molto chiaro se si tratti di una texture o di una immagine
Eh si darkhero hai ragione pensandoci si può fare anche con i css assegnando vari css diversi in base alla risoluzione dello schermo giusto? Anche se io l'ho sempre fatto con uno script da mettere poi nell'onload del body, ma il mondo è bello perchè è vario

[giggi1991]

Buono a sapersi!

[personalfreedom]

Originariamente inviato da darkhero
Io non ho ben capito..per ripetere il pattern sai come si fa, a risoluzioni diverse il pattern si ripete + o meno volte... quindi lo sfondo non si allarga e non si stringe, forse tu intendi come si fa ad adattare un immagine alla finestra del browser senza mai "segarla" ? cioè un immagine che sia sempre quanto la finestra ?

Si scusa mi sono spiegato male, non mi riferivo al pattern che rimane giustamente come hai detto indifferente alla risoluzione del monitor, ma alle singole parti grafiche del sito. Tipo al menu, e in generale a tutto l'intero sito web che non viene ridimensionato correttamente quando cambia la risoluzione del monitor. Mi sembrava di poter risolvere la cosa semplicemente assegnando al tag body o html (che sono i contenitori di tutto il sito) una larghezza width del 100% ma non ho risolto. Possiamo iniziare con l'esempio dell'immagine se vuoi, tanto poi si adatta il discorso anche agli altri elementi del sito web

[cassano]

http://www.html.it/pag/19457/background-size/

[personalfreedom]

Originariamente inviato da cassano
http://www.html.it/pag/19457/background-size/

quelle proprietà css devo applicarle al tag body/html per rederle effettive per tutte le altre sezioni div?

[personalfreedom]

Originariamente inviato da darkhero
No aspetta, qua la cosa è diversa, dipende dal tipo di programmazione che hai usato...se non sono tabelle e semplici div devi usare le misure, o le metti in pixel ( e quando cambi risoluzione non cambiano) o le metti in percentuale ( quindi cambiano in base alla risoluzione) . Se vuoi un consiglio per usare un layout "fluido" ti conviene usare le media-queries (cioè sono delle condizioni che dicono al browser che entro un tot il menù può essere 300 px, appena la risoluzione della pagina scende sotto i 940px allora il menù diventa 150px , per fare un esempio... ) . Le percentuali sono difficili da capire fino in fondo, creano parecchi problemi. In ogni caso se metti 100% al body non cambia il fatto che se il tuo menù è 300px sarà sempre 300 px... ti consiglio di studiarti le media-queries , trovi le guide su internet

Seguiro il tuo consiglio però una cosa, tempo fa quando ero meno arruginito di ora, mi sembra di ricordare che come dici tu avevo realizzato il sito in tabelle e avevo risolto impostando appunto la percentuale della tabella (al cui interno c'erano altre tabelle e relative sezioni div) e la pagina web si adattava automaticamente ad ogni computer e browser (avendo effettuato anche correttamente la validazione degli standards W3C). Adesso, teoricamente potrei anche ritornare a studiarmi come utilizzare le tabelle visto che non me lo ricordo benissimo, ma secondo te oggigiorno, è meglio fare un sito suddiviso per tabelle (nel libro su cui ho studiato css e html/xhtml consigliava questa strada in modo tale da caricare il sito per parti e rendere il caricamento piu veloce (cosa vera dopotutto) ) oppure è meglio dividere il sito in div senza usare le tabelle? da questo presupposto potrei poi pensare a come risolvere il problema dell'adattamento del sito ai diversi browser e alle diverse risoluzioni