[HTML] Background responsive

sergio70 · 7 Mar 2017

Prima di tutto volevo salutare tutti i membri del forum, mi chiamo Sergio e da poco sto sto approfodendo la conoscenza di WordPress. In passato ho lavorato un pò con Joomla.

Il mio problema però è diverso e cioè:
dovrei semplicemente realizzare una index.html che mi permetta di avere uno sfondo che si ridimensioni automaticamente in base alla risoluzione dello schermo.
E fino a qui non ho avuto grossi problemi, mentre invece ho avuto problemi e non so come fare per poter fare in modo che quando il sito viene visualizzato su Mobile, venga caricata un'altra immagine.

Ho realizzato 2 immagini, una orizzontale e una verticale pensando appunto al cellulare.

Qualcuno può aiutarmi nel realizzare il codice che mi permetta di creare questa pagina responsive?
Grazie

Max 1 · 7 Mar 2017

Devi usare i breakpoint e le media queries.
In sostanza ad ogni risoluzione dei brekpoint puoi definire le regole css o nascondere/bisualizzare gli elementi come immagini testi ecc.

sergio70 · 7 Mar 2017

Come si usano?
Scusa ma sono proprio a zero.
Attualmente nell'index.html mi collego al CSS esterno che contiene questo codice di prova:

Codice:

#sfondo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;   
}


@media screen and (min-width: 480px) {
   #sfondo {
        background-image:url(Home_B1_portrait.jpg);
    
  }
 
}

@media screen and (min-width: 2480px) {
   #sfondo {
        background-image:url(Home_B1_landscape.jpg)
    
  }
 
}

@media screen and (min-width: 240px) {
    body {
        background-color: lightgreen;
    }
}

Ma così ho la foto che non si adatta e mi esce dallo schermo

Max 1 · 7 Mar 2017

Dai un'occhiata qui
http://www.html.it/pag/32823/definire-i-breakpoint-con-le-media-queries/

sergio70 · 7 Mar 2017

Grazi, in effetti ho fatto subito una ricerca e ho trovato la stessa foto.
Ho provato e in effetti il colore di sfondo cambia al ridimensionamento.
Ora però il problema è caricare una foto diversa e non un colore diverso, applicando quindi lo stesso concetto ho scritto:

Codice:

.sfondo {
    position:fixed;
    top:0;
    left:0;
    margin:0;
    padding:0;
    max-width: 100%;
    height: auto;
    z-index: -1;
    background-color:#FC9;       
}

@media screen and (min-width: 480px) {
 .sfondo {
        background-image:url(../Home_B1_portrait.jpg)
        background-repeat:no-repeat
    
  }
 
}

@media screen and (min-width: 854px) {
   .sfondo {
        background-image:url(../Home_B1_landscape.jpg)
      background-repeat:no-repeat
  }
 
}

Il problema è che non carica le foto, allora nell'index ho messo:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
<title>Dorso Duro Adrenalina</title>
<link rel="stylesheet" href="stile.css" type="text/css">
</head>

<body>
<img class="sfondo" src="Home_B1_landscape.jpg"  />

</body>
</html>

Così però ho la foto di sfondo ma non cambia con la risoluzione diversa, inoltre sul notebook in full screen mi esce dallo schermo, mentre se rimpicciolisco mi si ridimensiona

sergio70 · 8 Mar 2017

corretto il body in:

Codice:

<body>

<img class="sfondo">
</body>

Così mi cambia la foto ma non si autoadatta, inoltre ridimensionando la finestra del browser, tra una risoluzione e l'altra, la foto sparisce, poi quando arrivo all'altro brackpoint mi esce l'altra foto altrimenti sfondo tutto bianco

borgo italia · 8 Mar 2017

ciao
prova a dargli la dimensione

Codice:

@media screen and (min-width: 480px) {
   #sfondo {
        background-image:url(Home_B1_portrait.jpg);
        background-size:100%;
        background-repeat:no-repeat;
  }
  }

sergio70 · 8 Mar 2017

Grazie faccio subito delle prove. Al momento avevo provato anche il codice:

Codice:

<picture>
  <source media="(min-width: 1024px)" srcset="6.jpg">
  <source media="(min-width: 960px)" srcset="5.jpg">
  <source media="(min-width: 840px)" srcset="4.jpg">
  <source media="(min-width: 650px)" srcset="3.jpg">
  <source media="(min-width: 465px)" srcset="2.jpg">
  <img src="1.jpg" style="width:auto;">
</picture>

nel body dell'INDEX e funzionava, ma non adattava la foto.

sergio70 · 8 Mar 2017

Ho provato e non mi carica l'immagine di sfondo:
Adesso il mio INDEX è questo:

Codice:

<!doctype html>
<html>
<head>
<title>Dorso Duro Adrenalina</title>

<link rel="stylesheet" type="text/css" href="stile.css">

    </head>
<body>

</body>
</html>

E il foglio di stile stile.css è:

Codice:

@media screen and (min-width: 680px) {
   #sfondo {
        background-image:url(1.jpg);
        background-size:100%;
        background-repeat:no-repeat;
  }
  }

Così non mi carica la foto, ho lo sfondo tutto bianco

borgo italia · 8 Mar 2017

ciao
strano a me funziona.
hai messo nell'head
<meta name="viewport" content="width=device-width" />
?

borgo italia · 8 Mar 2017

dimenticavo
ma nel body non hai messo qualcosa del genere

HTML:

<div id="sfondo">
<p>nel mezzo di camin di nostra vita<br />
mi ritrovai per una selva oscura<br />
ecc...</p>
</div>

sergio70 · 8 Mar 2017

Si avevo fatto delle prove, ma non va. Il mio INDEX adesso è così scritto:

Codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<html>
    <head>
        <title>Dorso Duro Adrenalina</title>
        <link rel="stylesheet" type="text/css" href="stile.css">
        <meta name="viewport" content="width=device-width" />
    </head>
    <body>
        <div id="sfondo">
        </div>
    </body>
</html>

Invece il stile.css:

Codice:

@media screen and (min-width: 680px) {
   #sfondo {
        background-image:url(1.jpg);
        background-size:100%;
        background-repeat:no-repeat;
  }
  }
 
  @media screen and (min-width: 960px) {
   #sfondo {
        background-image:url(2.jpg);
        background-size:100%;
        background-repeat:no-repeat;
  }
  }
 
  @media screen and (min-width: 1024px) {
   #sfondo {
        background-image:url(3.jpg);
        background-size:100%;
        background-repeat:no-repeat;
  }
  }

Così non ottengo nessun risultato, nessuna immagine di sfondo che risulta completamente bianco

sergio70 · 8 Mar 2017

Se invece nel body scrivo questo nel DIV:

Codice:

    <body>
        <div id="sfondo">
        <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
        </div>
    </body>

Mi compare metà foto e aumentando i BR, quindi lo spazio del contenitore DIV, vedo il resto della foto

sergio70 · 8 Mar 2017

Ho aggiunto al CSS questo codice:

Codice:

  html, body {
  height: 100%;
}
#sfondo {
  min-height: 100%;
}
 
/* IE6 hack */
* html #container {
  height: 100%;
}

Adesso le foto vengono caricate ma si ridimensionano solo in orizzontale, quindi quando riduco la finestra vedo tutta la foto, ma quando l'allargo a pieno schermo la foto viene tagliata e non vedo tutta la parte in sotto

sergio70 · 8 Mar 2017

Sto facendo altre prove ma non riesco a venirne fuori e adattarlo alle mie esigenze.
Ho messo OnLine 2 esempi che potete vedere:
prova1
prova2

Nella prova1 uso cambio solo uno sfondo nel DIV in base alla risoluzione, anche se non mi funziona quella a 480px
Ma questo non riesco a farlo funzionare quando devo invece farlo con le foto, Vedi prova2

Max 1 · 8 Mar 2017

borgo italia ha scritto:
Codice:

<meta name="viewport" content="width=device-width />

Se non lo metti non funziona

borgo italia · 8 Mar 2017

ciao
non credo che tu riesca a fare esattamente quello che vuoi, comunque dai un'occiata a
https://www.w3schools.com/cssref/css3_pr_background-size.asp

sergio70 · 9 Mar 2017

borgo italia ha scritto:
ciao
non credo che tu riesca a fare esattamente quello che vuoi, comunque dai un'occiata a
https://www.w3schools.com/cssref/css3_pr_background-size.asp

Grazie, lo avevo già visto e provato ma non fa al caso mio. Adesso sto provando con VIEWPORT visibile qui
Il problema è nel fargli cambiare la foto quando viene visualizzato su Mobile e/o con risoluzioni diverse

borgo italia · 9 Mar 2017

ciao
dovresti fare così

HTML:

<style type="text/css">
/* qui gli stili comuni alle varie risoluzioni*/
/* poi gestisci i cambiamenti*/
@media screen and (min-width: 300px){
    #sfondo {
        background-image:url(300px.jpg);
        /*.......*/
    }
    /*ecc....*/
}
@media screen and (min-width: 480px){
    #sfondo {
        background-image:url(480px.jpg);
        /*.......*/
    }
    /*ecc....*/
}
@media screen and (min-width: 768px){
    #sfondo {
        background-image:url(768px.jpg);
        /*.......*/
    }
    /*ecc....*/
}
@media screen and (min-width: 1024px){
    #sfondo {
        background-image:url(1024px.jpg);
        /*.......*/
    }
    /*ecc....*/
}
</style>

però ricordati di mettere il tag altrimenti non funziona
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

poi è meglio che tu utilizzi html5
<!DOCTYPE html>

sergio70 · 9 Mar 2017

borgo italia ha scritto:
ciao
dovresti fare così

HTML:

<style type="text/css"> /* qui gli stili comuni alle varie risoluzioni*/ /* poi gestisci i cambiamenti*/ @media screen and (min-width: 300px){ #sfondo { background-image:url(300px.jpg); /*.......*/ } /*ecc....*/ } @media screen and (min-width: 480px){ #sfondo { background-image:url(480px.jpg); /*.......*/ } /*ecc....*/ } @media screen and (min-width: 768px){ #sfondo { background-image:url(768px.jpg); /*.......*/ } /*ecc....*/ } @media screen and (min-width: 1024px){ #sfondo { background-image:url(1024px.jpg); /*.......*/ } /*ecc....*/ } </style>

però ricordati di mettere il tag altrimenti non funziona
<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

poi è meglio che tu utilizzi html5
<!DOCTYPE html>

Faccio delle prove. Al momento, grazie ad un amico, ho ovviato con Adobe Muse che permette nell'ultima versione di gestire i punti di interruzione.
Però vorrei provare da codice, grazie

[HTML] Background responsive

Nuovo Utente

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Super Moderatore

Nuovo Utente

Nuovo Utente

Super Moderatore

Super Moderatore

Nuovo Utente

Nuovo Utente

Nuovo Utente

Nuovo Utente

Super Moderatore

Super Moderatore

Nuovo Utente

Super Moderatore

Nuovo Utente

Discussioni simili