Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 29
  1. #1
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    589

    responsive background image resize

    so che il topic è ormai obsoleto e risolto da secoli, ma io ho ancora un problema: per una immagine full-background sto cercando di mantenere il ratio height/width iniziale, fino ad un punto oltre il quale rimane fissa, come in questo esempio.
    Nel mio caso invece il ratio funziona ma fino in fondo, quindi al minimo schermo responsive l'immagine è talmente ridotta che non riempie interamente il container. Eppure ho un codice standard:
    codice:
    {background:url('immagine.jpg') no-repeat center center cover fixed;}
    Come faccio a mantenere l'immagine sempre piena?

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,244
    Come tu stesso hai impostato nel tuo codice, la regola principale è background-size con valore cover. Bisogna capire esattamente cosa intendi per "fino ad un punto oltre il quale rimane fissa". In quell'esempio per ottenere quell'effetto non c'è nulla di più se non quella regola. Il valore cover infatti fa in modo che l'immagine sia "ritagliata" per coprire l'intera area disponibile dell'elemento su cui è applicata, mantenendo il rapporto delle dimensioni (così come hai indicato tu stesso). E' chiaro che l'effetto finale è influenzato sia dal rapporto stesso dell'immagine (quindi i valori originali di larghezza e altezza dell'immagine) sia dalle dimensioni (larghezza e altezza) che può assumere l'elemento su cui è applicata la regola. Se vuoi fissare un limite minimo, puoi impostare qualcosa del tipo min-width e/o min-height per il body o per l'elemento a cui applichi quel background.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    589
    Quote Originariamente inviata da KillerWorm Visualizza il messaggio
    fino ad un punto oltre il quale rimane fissa
    per esempio questa immagine non mantiene il ratio, ma viene ristretta

    io quindi vorrei un effetto che inizialmente rimpicciolisce, e poi restringe

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,244
    In quei link c'è un'immagine impostata per il background del body, mentre nel tuo caso stai usando un elemento <img> da quel che vedo. Non puoi pretendere che funzioni allo stesso modo. Molto semplicemente, se vuoi che l'immagine riempia l'intero body della tua pagina, dovrai applicarla appunto come background del body e impostargli il cover.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  5. #5
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    589
    ...ma infatti non deve riempire l'intero body della pagina, solo quella porzione di header

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,244
    Allora non capisco dove sta il problema. Negli esempi che hai linkato non c'è alcun punto oltre il quale l'immagine rimane fissa; è semplicemente un background impostato col valore cover che fa tutto il lavoro. Nel tuo caso invece vedo un elemento <img> (quindi non un'immagine impostata come background). Non so dove tu abbia applicato quel css che indichi nel primo post, ma il primo passo è appunto impostare quell'immagine come background dell'elemento in questione, non usando un elemento <img>... da lì non si scappa.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  7. #7
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    589
    ho incluso un allegato, il problema è che in modalità responsive l'immagine non riempie lo spazio. Nell'esempio che avevo indicato invece ci riesce... quindi "cover" non è sufficiente..
    Immagini allegate Immagini allegate

  8. #8
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,244
    Credimi, ho capito benissimo dove sta il problema. Rileggi bene ciò che ti ho indicato:
    Nel tuo caso invece vedo un elemento <img> (quindi non un'immagine impostata come background). Non so dove tu abbia applicato quel css che indichi nel primo post, ma il primo passo è appunto impostare quell'immagine come background dell'elemento in questione, non usando un elemento <img>... da lì non si scappa.
    Riesci ad applicare un'immagine come background? Inizia da lì
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  9. #9
    Utente di HTML.it
    Registrato dal
    Oct 2007
    residenza
    Trieste
    Messaggi
    589
    mi ero accorto anche io che fosse una img invece che una classe, ma quello che mi confonde è quanto segue:

    l'html della pagina è
    <div class="" id="home-image">
    <img class="img-responsive" src="airplane.jpg" />
    </div>


    e siccome la classe esiste come
    #home-image img-responsive {background:url('airplane.jpg') no-repeat center center cover fixed;}

    allora in teoria ho un doppio, quindi sarebbe sufficiente togliere la img dal <div> per avere l'immagine impostata come background.
    Ma allora perchè non funziona, anzi ci mette anche più tempo a caricare?
    Se poi scrivo <div class="img-responsive" id="home-image"> allora l'immagine non viene proprio caricata
    Ultima modifica di stardom; 29-01-2019 a 22:28

  10. #10
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,244
    La cosa non funziona perché commetti diversi errori.

    - Se togli l'elemento <img> il div (#home-image) che lo contiene ha un effetto collassamento (quantomeno su desktop) perché gli elementi che stanno dentro (a parte <img>) hanno position:absolute che li rimuove dal normale flusso dei contenuti.

    - In qualunque caso, per logica presumo che quel div (che appunto ha id #home-image) debba contenere giusto l'elemento <img>. Perché ci sta altra roba dentro? Ce l'hai messa tu arbitrariamente o il template lo consente?
    In questo caso, se vuoi che l'elemento non collassi, andrebbe tolto il position:absolute dagli elementi figli. A quel punto puoi impostare l'immagine come background.

    - Oltre questo, stai sbagliando ad applicare il valore cover in quel modo (dove hai visto che si applica così?). Se vuoi usare la forma contratta per la proprietà background fai una ricerca del tipo "background cover shorthand" e vedi come va applicato quel valore.
    Ti consiglio inoltre di utilizzare la console web del tuo browser (premi F12) che ti permette anche di verificare se le regole CSS definite per i singoli elementi sono valide e vengono correttamente applicate.
    Può esserti utile anche passare il tuo CSS in un validatore (ad esempio questo) per verificare se ci sono errori di qualche genere.


    Io so come risolvere ma vorrei che ci arrivassi da te.
    Magari fai qualche prova e vedi che riesci a combinare.
    Fai sapere, buon proseguimento.
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.