Come cambiare l'immagine di sfondo con i css (non dal body)

**bisco11** · 19-02-2016, 10:57

Buongiorno Ragazzi

io Avrei la necessità di visulalizzare un immagine di sfondo differente sulla risoluzione Mobile 320x480.

Quindi mi sono preparato una foto 320x480

La foto non è caricata dal body, ma da un div perchè ho anche la necessità di aggiungere una Caption con del testo in basso.

Quindi questa è la mia struttura

codice:

<body style="border::0; margin:0; padding:0;">
<div class="caption">
   <img src="img/home.jpg"/>
   <span>
      <a href="indexhome.php"><strong>Entra nel Sito</strong></a>
   </span>
</div>

Ora nella media query: min width:320 and max-width:479

ho il segunte codice che mi visualizza l'immagine adattata, ma come ho già detto io ho la necessità di mostrare solo in questa risoluzione un altra foto.

il CSS

codice:

@media screen and (min-width:320px) and (max-width:479px;) 
{
	
	.caption img {
    float: left;
    margin: 0;
    padding: 0;
    background: #fff;
    border: none;
	width:100%; 
	height:auto;
	
}
	.caption span {
    float: left;
    margin: 0;
    padding: 10px;
    width: 100%;
    color: #dedede;
     
    background: #222; /* browser che non supportano rgba */
    background: rgba(0,0,0,0.7);
    position: absolute;
    left: 0;
    bottom: 0;
}
}

Potete Aiutarmi?

**KillerWorm** · 21-02-2016, 14:14

Ciao, potresti usare due elementi <img> sul codice html e impostarne, da css, la proprietà display come initial o none, rispettivamente per mostrare o nascondere una o l'altra immagine.

Esempio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      #img2{display:none}
      @media screen and (min-width:320px) and (max-width:479px){
        #img1{display:none}
        #img2{display:initial}
      }
    </style>
  </head>
  <body>
    <img id="img1" src="image1.jpg" alt="immagine 1">
    <img id="img2" src="image2.jpg" alt="immagine 2">
  </body>
</html>

PS: fai attenzione, sul tuo codice c'è un punto e virgola che non andrebbe messo, qui:

codice:

(max-width:479px;)

**bisco11** · 22-02-2016, 11:59

Originariamente inviata da KillerWorm

Ciao, potresti usare due elementi <img> sul codice html e impostarne, da css, la proprietà display come initial o none, rispettivamente per mostrare o nascondere una o l'altra immagine.

Esempio:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <style type="text/css">
      #img2{display:none}
      @media screen and (min-width:320px) and (max-width:479px){
        #img1{display:none}
        #img2{display:initial}
      }
    </style>
  </head>
  <body>
    <img id="img1" src="image1.jpg" alt="immagine 1">
    <img id="img2" src="image2.jpg" alt="immagine 2">
  </body>
</html>

PS: fai attenzione, sul tuo codice c'è un punto e virgola che non andrebbe messo, qui:

codice:

(max-width:479px;)

Ciao e Grazie per il tuo consiglio.

Ho solo un problema,

Se visualizzi il sito in modalità responsive
sui vari tool sul web funziona perfettamente,

Invece provandolo sullo smartphone (samsung galaxy s6 e galaxy s6 edge plus) con Chrome ed il browser predefinito visualizza la prima immagina adattata, è come se non prendesse la proprietà display none.

Come posso risolvere?

Grazie in anticipo

link del sito: http://www.emanuelemarazzi.com/preview/fondazione

**bisco11** · 22-02-2016, 12:20

Originariamente inviata da bisco11

Ciao e Grazie per il tuo consiglio.

Ho solo un problema,

Se visualizzi il sito in modalità responsive
sui vari tool sul web funziona perfettamente,

Invece provandolo sullo smartphone (samsung galaxy s6 e galaxy s6 edge plus) con Chrome ed il browser predefinito visualizza la prima immagina adattata, è come se non prendesse la proprietà display none.

Come posso risolvere?

Grazie in anticipo

link del sito: http://www.emanuelemarazzi.com/preview/fondazione

Credo di aver capito

la risoluzione di quei telefoni è 640x1136 quindi credo che devo prepararmi una foto con quella risoluzione

**KillerWorm** · 22-02-2016, 13:43

quindi credo che devo prepararmi una foto con quella risoluzione

Intendi l'immagine che appare sulla prima pagina di quel link?

Capisco che sia una enter-page ma (senza alcuna offesa) il tuo approccio nell'usare un'immagine che contenga titolo, logo e altri elementi testuali (propri, invece, dei contenuti del sito in sé) e cercare addirittura di usarla come layout stesso del sito (dovendo poi utilizzare e caricare diverse immagini per le diverse risoluzioni), a mio avviso non ha nulla a che fare col responsive, anzi è una tecnica del tutto opposta che forse si poteva pensare di usare nel millennio scorso.

Personalmente ti consiglierei di rivedere un po' la cosa: usare un'unica immagine, che non contenga né logo né testi, che funga solo da sfondo e che, in questo caso, andrai a gestire in modo responsive ridimensionandola/ritagliandola/allineandola opportunamente. Intestazione, logo, contenuti testuali e altri elementi del layout stesso, andranno invece opportunamente integrati all'interno della struttura della pagina, usando i vari elementi html che andrai a formattare sempre attraverso il css.

Può essere pure che sul web si trovino dei layout di pagina già pronti, che siano responsive e che facciano grossomodo quello che stai cercando di fare tu, ma col giusto approccio.
Nel caso, prova a fare qualche ricerca o attendi eventuali risposte da altri utenti.

Chiaramente sono solo dei consigli, poi vedi tu che fare.

Discussione: Come cambiare l'immagine di sfondo con i css (non dal body)

Strumenti discussione

Ricerca discussione

Visualizza

Come cambiare l'immagine di sfondo con i css (non dal body)

Permessi di invio