Sfondo con HTML problema sul mobile

**giusepperomano** · 25-04-2016, 12:23

Salve sto utilizzando il seguente codice CSS per applicare uno sfondo all'intera pagina

codice HTML:

body{
background:url('immagine.jpg')no-repeatcentercenterfixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;
}

Funziona perfettamente sulle versioni dei browser desktop ma nel mobile lo sfondo non copre interamente la pagina e sotto mi resta uno spazio bianco a seconda della grandezza del dispositivo ... se il contenuto della pagina eccede la singola schermata, ossia se per leggere l intero contenuto è necessario uno scroll verso il basso, lo sfondo allora si adatta a coprire la pagina per l'intera sua altezza (senza ripetizioni eh) (cosa che come dicevo prima invece sui desktop fa sempre anche se il testo della pagina è poco).
Grazie in anticipo

**carlomarangoni** · 25-04-2016, 15:24

Hai scritto no-repeatcentercenterfixed; tutto attacato e non va bene prova a staccarli come deve essere così: no-repeat center center fixed;

**giusepperomano** · 25-04-2016, 15:38

scusami quando ho incollato il codice l'avrà variato e non ho controllato ma nel foglio di stile l'ho scritto con gli spazi

**carlomarangoni** · 25-04-2016, 15:53

Allora con solo l'informazione di quel codice è quasi impossibile capire dove sta il problema

**Gennaro81** · 25-04-2016, 16:11

Ciao
anch'io mi trovo in una situazione simile.
Sto mettendo un 'immagine tramite i css all'interno come testata del sito, sul web si vede ma sullo smartphone mi viene tagliata :

Nell'HMTL ho inserito i seguenti campi:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<link href="css/style.css" rel="stylesheet" />
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>

<div id="testata">

</div>
...
...
</body>
</html>

mentre nel file css questo :

#testata {
width:100%;
height: 411px;
background-repeat: no-repeat;
background-position: center center fixed;
background-image: url('../img/testata.gif');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

vorrei che l'immagine venga visualizzata completamente e non tagliata

Grazie Gennaro

**carlomarangoni** · 25-04-2016, 16:32

@Gennaro81: Secondo me tu dovresti aprire una discussione per conto tuo non agregarti a questa perchè rispondere a due situazioni diverse anche se simili non è possibile

**Gennaro81** · 25-04-2016, 16:36

Grazie Carlo
Provvedo subito

**giusepperomano** · 25-04-2016, 18:56

Sto utilizzando bootstrap ti allego altro codice e due screen uno desktop e uno mobile
Desktop Cattura1.jpg
Mobile cattura2.jpg
index.html

codice HTML:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->    <meta name="description" content="">    <meta name="author" content="">    <link rel="icon" href="favicon.ico">
    <title>Signin Template for Bootstrap</title>
    <!-- Bootstrap core CSS -->    <link href="dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->    <link href="assets/css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <!-- Custom styles for this template -->    <link href="signin.css" rel="stylesheet">
    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->    <script src="assets/js/ie-emulation-modes-warning.js"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->    <!--[if lt IE 9]>      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>    <![endif]-->
  </head>
  <body>
    <div class="container">
      <form class="form-signin">        <h2 class="form-signin-heading">Please sign in</h2>        <label for="inputEmail" class="sr-only">Email address</label>        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>        <label for="inputPassword" class="sr-only">Password</label>        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>        <div class="checkbox">          <label>            <input type="checkbox" value="remember-me"> Remember me          </label>        </div>        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>      </form>
    </div> <!-- /container -->

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->    <script src="assets/js/ie10-viewport-bug-workaround.js"></script>  </body></html>

signin.css

codice HTML:

body {  padding-top: 40px;  padding-bottom: 40px;  color:#fff;  /*background-color: #eee;*/  background: url('back.jpg') no-repeat center center fixed;  -webkit-background-size: cover;  -moz-background-size: cover;  -o-background-size: cover;  background-size: cover;}
.form-signin {  max-width: 330px;  padding: 15px;  margin: 0 auto;}.form-signin .form-signin-heading,.form-signin .checkbox {  margin-bottom: 10px;}.form-signin .checkbox {  font-weight: normal;}.form-signin .form-control {  position: relative;  height: auto;  -webkit-box-sizing: border-box;     -moz-box-sizing: border-box;          box-sizing: border-box;  padding: 10px;  font-size: 16px;}.form-signin .form-control:focus {  z-index: 2;}.form-signin input[type="email"] {  margin-bottom: -1px;  border-bottom-right-radius: 0;  border-bottom-left-radius: 0;}.form-signin input[type="password"] {  margin-bottom: 10px;  border-top-left-radius: 0;  border-top-right-radius: 0;}

Discussione: Sfondo con HTML problema sul mobile

Strumenti discussione

Ricerca discussione

Visualizza

Sfondo con HTML problema sul mobile

Permessi di invio