posizionare gli elementi Responsive

**massimo67** · 09-02-2018, 20:22

ciao a tutti ,
non capisco la dichiarazione da usare per fare questo: (vedi allegato)

in pratica ho uno sfondo responsive e se ridimensiono il browser lo sfondo si adatta, questo non succede per il nome
e per la foto , non restano "agganciate" allo sfondo ma si spostano sballando i posizionamenti.

ecco il CSS del foglio di stile

codice:

.blocco-sfondo { 
    
    width: 100%;
    height: 768px;
    background-image: url('https://miosito/immagine.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
  
}

.nome { 
  
  position: absolute;
  top: 80px;
  left: 10px;
  text-align:center;
  font-size:40px;
  color:#d67f03;

}

.foto {  
  margin:auto;
  position: absolute;
  top: 185px;
  left: 45px;
   
}

mi chiedo quale dichiarazione devo usare per nome e foto

grazie

**m4rko80** · 14-02-2018, 09:34

Ciao, provando questo, mi pare funzioni tutto correttamente, a meno che non intendevi perchè testo e foto non si ridimensionano col ridurre delle dimensioni dello schermo

codice:

<html>
<head>
<style>


.blocco-sfondo { 
    
    width: 100%;
    height: 768px;
    background-image: url('immagine.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
  
}
.nome { 
  
  position: absolute;
  top: 80px;
  left: 10px;
  text-align:center;
  font-size:40px;
  color:#d67f03;


}


.foto {  
  margin:auto;
  position: absolute;
  top: 185px;
  left: 45px;
   
}
</style>
</head>
<body>


<div class="blocco-sfondo">
<div class="nome">
  IL MIO NOME
</div>
<div class="FOTO">
   <img src="image.png">
</div>
</div>






</body>
</html>

Attualemente foto e testo hanno dei posizionamenti fissi che ovviamente non cambiano sulle diverse sizes di schermo.

Discussione: posizionare gli elementi Responsive

Strumenti discussione

Ricerca discussione

Visualizza

posizionare gli elementi Responsive

Permessi di invio