(RISOLTO) Immafine di background ingrandita

[depejo]

Sto utilizzando il template blue-point e nel tentativo di sostituire l'immagine di background ho caricato quella fatta da me e ho modificato il nome immagine che viene caricato dal css. Fin qui tutto semplice. Quello che non capisco (ma me lo faceva anche con il classico beez) è per quale motivo l'immagine header che ho fatto viene visualizzata zoomata, ossia più grande di quello che è. E' tutta la mattina che smanetto con i css ma non trovo il motivo per cui il background dell'header (in entrambi i template citati) viene ingrandito.

[alessioa]

puoi mettere un link del sito ?

[depejo]

Il sito era offline e l'ho posto online almeno finché qualcuno non riesca a darmi il consiglio giusto.
http://www.associazioneapri.org/

L'immagine dell'header (il rettangolone rosso) è larga 1287 pixel però nello spazio apposito (viene caricata come background), che è largo esattamente 1287 pixel, non entra. Questo vuol dire che qualcosa la ingrandisce ma non riesco a capire cosa.

[alessioa]

Il contenitore del sito (#back) non è di 1287px per quello l'immagine non ci sta.

Soluzioni :

- riduci l'immagine
- aumenti le dimensioni del contenitore

Scegli tu

[depejo]

Be' il contenitore del sito non ha una larghezza definita, per quello che vedo io. Infatti #back ha definiti soltanto il margin e il padding a zero. E poi se fai una salvaschermo e misuri quanto è largo lo spazio dove dovrebbe visualizzarsi l'header (quello nei toni del rosso) è esattamente 1287 pixel. E' per quello che l'ho fatto di quella misura. Invece come vedi l'header va oltre come se fosse più largo, come se venisse "stretchato" da qualcosa.

[tomtomeight]

L'immagine non si ridimensiona in base alla larghezza dell'header che è responsive. Metti le dimensioni dell'immagine in % oppure metti background cover.

[alessioa]

Ma hai usato un buon righello ? 

è di 1030x230

se guardi bene il css prima del #back c'è un #all ed è settato a 1050px, quindi un'immagine di 1287px non ci entrerà mai nemmeno a piangere in lingue diverse e nominare i santi fino al 2028 

[depejo]

Io non riesco a spiegarmi: ci riprovo. Lo spazio dedicato a ospitare l'immagine 1287 x 229, se faccio un salva schermo e lo schiaffo su photoshop e lo misuro è di 1287 x 229. Però l'immagine non ci va. Questo vuol dire (e io che l'ho fatta lo vedo anche a occhio) che l'immagine viene strechata. E' come se avendo una spazio di 100 x 100 io ci infilassi un'immagine di 100 x 100 però tramite css definissi l'altezza da 100 ma la larghezza da 150. Ovvio che si stretcha e nello spazio da 100 x 100 non ci va.

Ora io che quello spazio sia da 1287 lo so con sicurezza perché l'ho misurato con photoshop. E che l'immagine viene stretchata ne sono sicuro perché su photoshop la vedo (al 100% ovviamente) che è più piccola.

Ho provato comunque a settare #all a 1287 pixel e s'è espanso a tutto schermo. Però io ho il pc con la configurazione a 1600 px di larghezza. :-(

[depejo]

ALT!! Fermi tutti. Con chrome si vede quasi decente. E' con Firefox che si allarga un casino tutto il content. Eppure è visualizzato al 100%... 
Non capisco...

[alessioa]

Stai facendo confusione.

Se riporti il codice css a come era prima e fai una prova caricando un'immagine di 1030x229, vedrai che ci entra, provare non ti costa nulla e ci guadagni in tempo.

Ti rimane comunque il problema che ha citato tomtomeight cioè la responsività, quindi o usi il background-cover oppure il with lo imposti in % invece che in px

[depejo]

Il background-cover? Vedi che succede a rimanere tanto tempo lontani dai css?  Che poi passano da 2 a 3 e fuoriscono tutti questi nuovi comandi. Ho dovuto inserire un background-size: 100% 100% e adesso è tutto a posto. 

Grazie ragazzi.