[HTML] Sfondo responsive - problema specifico

[AlessandraPoggi]

Ciao a tutti,
devo realizzare una pagina html responsive che contiene diversi sfondi colorati.
Questi sfondi colorati, posizionati uno sotto l'altro, devono adattarsi in modo automatico alla schermata del device con il quale vengono visualizzati, sia in larghezza che in altezza.

Esempio: se per visualizzare la pagina utilizzo un telefono con risoluzione 360 x 640 px, ogni singolo sfondo deve avere queste dimensioni, così come se utilizzo un laptop 1366 x 768 px.

Sapete se esiste un modo per automatizzare questo processo di adattamento o devo farmelo tutto a mano utilizzando i break point (che mi sembra un suicidio)?

Grazie mille

 

[Max 1]

Io non conosco altro metodo che media query breakpoints

 

[WmbertSea]

Ciao, se ho capito bene ti serve semplicemente adattare l'immagine di background alle dimensioni del contenitore a prescindere da quali esse siano e al fatto che queste possono essere non proporzionali rispetto a quelle dell'immagine stessa, giusto?

In tal caso ti basta impostare la proprietà background-size in questo modo:

background-size: 100% 100%;

In questo modo entrambe le dimensioni (larghezza e altezza) dell'immagine si porteranno alle stesse relative dimensioni del contenitore.

Se non è quello che cercavi di fare, prova a chiarire.

 

[Max 1]

In questo modo entrambe le dimensioni (larghezza e altezza) dell'immagine si porteranno alle stesse relative dimensioni del contenitore.

Ma si deforma l'immagine!

 

[Aedo1]

Ciao a tutti,
devo realizzare una pagina html responsive che contiene diversi sfondi colorati.
Questi sfondi colorati, posizionati uno sotto l'altro, devono adattarsi in modo automatico alla schermata del device con il quale vengono visualizzati, sia in larghezza che in altezza.

Esempio: se per visualizzare la pagina utilizzo un telefono con risoluzione 360 x 640 px, ogni singolo sfondo deve avere queste dimensioni, così come se utilizzo un laptop 1366 x 768 px.

Sapete se esiste un modo per automatizzare questo processo di adattamento o devo farmelo tutto a mano utilizzando i break point (che mi sembra un suicidio)?

Grazie mille

Io farei così:

 height: 100%;

So che così l'immagine viene tagliata ma... Amen!
Se è tinta unita/sfondo "tagliabile" può andare.... senno ti toccano i query breakpoint.

(Io ho fatto così per creare l'effetto Parallax ma penso possa andar bene anche con quello che cercho di fare)

Spero di essere stato utile,
Aedo1

 

[AlessandraPoggi]

Ciao a tutti e grazie mille per le vostre risposte!
Mi avete dato degli utilissimi spunti!