Sfondo 100% con immagine di forma irregolare

karedas

Sfondo 100% con immagine di forma irregolare

Riiisalve a tutti. Ho diciamo risolto i miei problemi però faccio comunque questa domanda per capire se vi è una possibilità diversa alla mia:
Lo sfondo in basso (quello rosso tanto x capirsi) di questa pagina d'attesa "http://www.actm.it" ha una forma irregolare come potete vedere. Il fatto è che , dovendo essere uno sfondo dinamico per via delle varie risoluzioni , ho dovuto (diciamo che mi è venuta come unica soluzione) inserire l'immagine con il tag <img> invece che metterla come background nei css. Ora: 1) Esiste un modo per dare allo sfondo una dimensione dinamica "width:100%" come per l'immagine? , 2) Come impostate voi in questo caso l'immagine essendo così grande e avendo i bordi soggetti a sfarfallio anche se lieve? Cioè, come e in che formato la salvate? (ah nn capisco ma cn Firefox mi si disabilitano i comando come "invio" per andare a capo e a volte mi tocca scrivere tutto appiccicato -.- ".

laburno

Ciao karedas,
se è un immagine <img> puoi dargli gli attributi width e height, però (l'ho scoperto neanche una settimana fa), i valori percentuali con IE non funzionano.

karedas

No ti sbagli =D
Se guardi sul link linkato poco sopra avevo per l'appunto adottato gia da prima l'uso dell'immagine al piede dello schermo al posto del background.
Però proprio all'immagine che visualizza quello sfondo rosso (sfondo che però è dato dal tag <img></img>), ho dato un valore in percentuale pari al 100% il quale mi permette di gestire dinamicamente e centrare quest'ultimo. Se non lo fosse, anche il browser della microschifosoft mi darebbe i soliti problemi!

Infatti l'immagine di per se è larga 1667px, è così grande perchè ho aumentato la risoluzione del .jpg e volevo avere meno sfarfallio possibile nella piegatura.
Grazie a 100% questa si adatta alla grandezza del browser! e cn IE e FF!

Cmq quello che intendevo io è se esiste un modo per gestire la grandezza della proprietà "background"

laburno

Ciao karedas,
quello che intendevo era che <img src="#" width="50%" height="50%"> non funziona su IE (almeno il 6, mi pare). Pensavo volessi fare così, ma ho capito male :).

Una proprietà per gestire la grandezza del background... non esiste.

Ti posso consigliare una soluzione però:

Creai un container che ricalchi il body, quindi 100% per entrambe le dimensioni.
A questo body metti come immagine di sfondo quella con il bordo rosso, centrata in basso.
Nel body lasci come immagine di sfondo il gradiente grigio.In questo modo non sei costretto ad usare <img> per un elemento strutturale.

karedas

Invece no come dici te è infattibile =D
Mi sono spiegato male provo a dirlo in parole più abbordabili =(

Lo sfondo come vedi ha una curva.
Questo vuol dire che quest'immagine deve avere una dimensione fissa e precisa.
Se usassi quest'immagine nel tag background cosa succederebbe?
Praticamente dovrei impostare il background come "no-repeat" e facendo così avrei un'immagine di una certa dimensione (esempio 1024px x 400px).

Cosa succede se qualcuno ha un monitor cn risoluzione 1280 x 1024 come me?
Praticamente avrei ai lati di questo sfondo (ponendo di averlo settato centrato sul body) delle colonne bianche dato che l'immagine, essendo più piccola della mia risoluzione, non prenderebbe mai l'intero spazio posto in orizzontale.

Quale è l'unica soluzione?
Non so se ne esistono altre ma io ho appunto impostato così l'html e il css:

Ho inserito un tag "<img>" nel quale ho inserito appunto l'immagine data.
Tramite gli attributi l'ho posizionato al piede della pagina.Adesso:
ho constatato che valori in percentuale come "width:50%, height:100%" invece vengono calcolati anche da ***Internet explorer.
***Se provi a vedere infatti la pagina linkata è proprio un'immagine con dimensioni 100% ad "adattarsi" alla larghezza del browser.
Se tolgo questo valore sia in IE che in Mozilla , lo sfondo si scombina e non va come dovrebbe.

Per il background ridimensionabile devo sentire se esiste qualche script!

laburno

@karedas said:

Invece no come dici te è infattibile =D
Mi sono spiegato male provo a dirlo in parole più abbordabili =(

Lo sfondo come vedi ha una curva.
Questo vuol dire che quest'immagine deve avere una dimensione fissa e precisa.
Se usassi quest'immagine nel tag background cosa succederebbe?
Praticamente dovrei impostare il background come "no-repeat" e facendo così avrei un'immagine di una certa dimensione (esempio 1024px x 400px).

Cosa succede se qualcuno ha un monitor cn risoluzione 1280 x 1024 come me?
Praticamente avrei ai lati di questo sfondo (ponendo di averlo settato centrato sul body) delle colonne bianche dato che l'immagine, essendo più piccola della mia risoluzione, non prenderebbe mai l'intero spazio posto in orizzontale.

Questo è il limite della mai soluzione, dovresti adottare un immagine, per dire di 1400x900.

Quale è l'unica soluzione?
Non so se ne esistono altre ma io ho appunto impostato così l'html e il css:

Ho inserito un tag "<img>" nel quale ho inserito appunto l'immagine data.
Tramite gli attributi l'ho posizionato al piede della pagina.

Questo soluzione funziona ed è la più pratica, ma è scorretta da un punto di vista ideologico (diciamo così) perché il tag <img> dovrebbe rappresentare del contenuto, e non la presentazione (compito che tocca ai css).

Se me ne viene in mente un altra di soluzioni, te la scrivo.

Adesso:
ho constatato che valori in percentuale come "width:50%, height:100%" invece vengono calcolati anche da ***Internet explorer.
***Se provi a vedere infatti la pagina linkata è proprio un'immagine con dimensioni 100% ad "adattarsi" alla larghezza del browser.
Se tolgo questo valore sia in IE che in Mozilla , lo sfondo si scombina e non va come dovrebbe.

Per il background ridimensionabile devo sentire se esiste qualche script!

Allora devo ricontrollare seriamente, un mese fa per un lavoro ho dovuto creare a mano le miniature di una serie di immagini perché IE6 non mi prendeva i valori percentuali

Grazie di aver messo luce sul problema, così ricontrollo