[HTML] Background responsive

sergio70

Nuovo Utente
7 Mar 2017
14
0
1
51
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.396
338
83
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

Nuovo Utente
7 Mar 2017
14
0
1
51
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
 

sergio70

Nuovo Utente
7 Mar 2017
14
0
1
51
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

Nuovo Utente
7 Mar 2017
14
0
1
51
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
148
63
PR
www.borgo-italia.it
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;
  }
  }
 
Ultima modifica:

sergio70

Nuovo Utente
7 Mar 2017
14
0
1
51
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

Nuovo Utente
7 Mar 2017
14
0
1
51
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
148
63
PR
www.borgo-italia.it
ciao
strano a me funziona.
hai messo nell'head
<meta name="viewport" content="width=device-width" />
?
 
Ultima modifica:

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
148
63
PR
www.borgo-italia.it
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

Nuovo Utente
7 Mar 2017
14
0
1
51
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

Nuovo Utente
7 Mar 2017
14
0
1
51
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

Nuovo Utente
7 Mar 2017
14
0
1
51
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

Nuovo Utente
7 Mar 2017
14
0
1
51
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
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
148
63
PR
www.borgo-italia.it
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

Nuovo Utente
7 Mar 2017
14
0
1
51
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
 
Discussioni simili
Autore Titolo Forum Risposte Data
O [HTML] problemi con la regola "background-attachment: fixed" in EDGE HTML e CSS 0
L [HTML] Background-image HTML e CSS 9
A [HTML] Background size per dispositivi mobili HTML e CSS 4
asevenx [HTML] -webkit-filter solo su immagine di background HTML e CSS 5
cornamusa [HTML] Immagine di Background HTML e CSS 1
Andrea Alessandrini [HTML] background annidati che si sovrappongono male HTML e CSS 3
M [WordPress] [HTML] Problema immagine background respondive WordPress 21
A [HTML] background fisso che non si ridimensiona con lo zoom HTML e CSS 4
D [HTML] Sfondo-Background fisso ma non troppo con effetto in movimento HTML e CSS 4
G Codice html Javascript 1
M Collegamento tra form html e script php PHP 4
L Ricezione dei dati su file php da modulo html PHP 6
F Creare elementi html con javascript Javascript 2
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1
C Dopo chiusura del tag php la stringa html va a capo PHP 1
G img html HTML e CSS 3
M Come fare un countdown in HTML? HTML e CSS 4
D Stampa a video in altra pagina html Database 3
A inserire variabile php colore in div html PHP 2
F Tv in html Offerte e Richieste di Lavoro e/o Collaborazione 1
N Script elenco file HTML HTML e CSS 5
L salvare codice html in mysql PHP 3
Cosina htaccess redirect 301 senza estensione html Web Server 6
E Errore di lettura php in html PHP 8
M HTML e PHP Offerte e Richieste di Lavoro e/o Collaborazione 3
C Form email php su pagina index.html? PHP 21
Shyson Meglio Javascript o HTML? Javascript 4
P inserimento icone social tramite html HTML e CSS 1
Z Mod_rewrite da HTML in PHP PHP 3
L Collegare un form html ad un database access Javascript 2
P HTML integrazione wordpress HTML e CSS 0
C [RISOLTO]Inserimento variabile php in input html PHP 20
L Eliminare estensione .html HTML e CSS 9
max1974 html in tooltip Javascript 0
C Risalire al php da html PHP 27
felino Esportare tabella HTML in PDF, quale libreria usare? Javascript 1
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
L [RISOLTO] Stampa a video risultato count in html PHP 13
V Servizio design pagina web e download in self contained html file Discussioni Varie 1
F [PHP] Form html PHP 2
G Aiuto HTML, collegamento con un bottone a una <div> di un' altra pagna HTML e CSS 5
R Aiuto sito html Offerte e Richieste di Lavoro e/o Collaborazione 3
M Estrarre dati da una select HTML PHP 3
G FORM HTML E PHP PHP 0
max1974 [HTML] Columns grid on modal form HTML e CSS 0
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
F [PHP] [HTML] Tabella cambia pagina responsive PHP 8
M [PHP] [HTML] Centrare in verticale un pulsante in una tabella PHP 3
S [HTML] Effetto su testo da togliere HTML e CSS 0

Discussioni simili