Impostare layout responsive mobile device

[inkemodo]

Ciao a tutti, sono nuovo e devo creare una pagina semplicissima in cui devo inserire un sfondo con alcune sfumature e il logo centrato.

Nel desktop riesco a visualizzarlo correttamente e centrare le immagine, mentre se lo provo sui iphone non riesco a centrarlo e su S4 non riesco a far visualizzare lo sfondo.

Ho fatto diverse prove, ma senza alcun esito positivo... ho utilizzato i @media only screen per le diverse risoluzioni... ma cmq nulla...

il logo è 640 × 609
Mentre lo sfondo Desktop è 1600 × 650
Quello per il mobile e 1280 × 500

Ho provato in jpg, png, ma nulla...

mi potete consigliare qualcosa, un css già compilato e testato?
Grazie

[ResianTaxidrive]

ma che istruzione usi per centrare?

[inkemodo]

parte del css... una cosa che non riesco a capire è perche sugli S4 lo sfondo non viene visualizzato...
non ho impostato bene tutti i parametri del css perchè vorrei risolvere prima il problema dell's4 poi devo cambiare i css in base alle varie risoluzioni. inoltre volevo capire quali dimensioni in px devo usare per creare le immagini di sfondo...quali sono le misure standard da utilizzare?

body {
  /* Location of the image */
  background-image: url('images/sfondo.jpg');
  
  /* Image is centered vertically and horizontally at all times */
  background-position: center center;
  
  /* Image doesn't repeat */
  background-repeat: no-repeat;
  
  /* Makes the image fixed in the viewport so that it doesn't move when 
     the content height is greater than the image height */
  background-attachment: fixed;
  
  /* This is what makes the background image rescale based on its container's size */
  background-size: cover;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
   background-image: url('images/sfondo-mobile.png');
    
    
}


.wrapper {
    width: 100%;
    height:400px;
    border: 0px solid black;
    position:absolute;
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    border: 0px solid;
    position:absolute;
top:50%; 
left:50%; 
margin-left:-112px; 
margin-top: -200px; 
padding:0; 
}


}


/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
   background-image: url('images/sfondo-mobile.png');
    
    
}


.wrapper {
    width: 100%;
    height:400px;
    border: 0px solid black;
    position:absolute;
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    border: 0px solid;
    position:absolute;
top:50%; 
left:50%; 
margin-left:-212px; 
margin-top: -200px; 
padding:0; 
}


}


/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
   background-image: url('images/sfondo-mobile.png');
    
    
}


.wrapper {
    width: 100%;
    height:400px;
    border: 0px solid black;
    position:absolute;
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    border: 0px solid;
    position:absolute;
top:50%; 
left:50%; 
margin-left:-212px; 
margin-top: -200px; 
padding:0; 
}


}


/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
   background-image: url('images/sfondo-mobile.png');
    
    
}


.wrapper {
    width: 100%;
    height:400px;
    border: 0px solid black;
    position:absolute;
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    border: 0px solid;
    position:absolute;
top:50%; 
left:50%; 
margin-left:-212px; 
margin-top: -200px; 
padding:0; 
}


}


/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
   background-image: url('images/sfondo-mobile.png');
    
    
}


.wrapper {
    width: 100%;
    height:400px;
    border: 0px solid black;
    position:absolute;
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    border: 0px solid;
    position:absolute;
top:50%; 
left:50%; 
margin-left:-212px; 
margin-top: -200px; 
padding:0; 
}


}


/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
   background-image: url('images/sfondo-mobile.png');
    
    
}


.wrapper {
    width: 100%;
    height:400px;
    border: 0px solid black;
    position:absolute;
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    border: 0px solid;
    position:absolute;
top:50%; 
left:50%; 
margin-left:-212px; 
margin-top: -200px; 
padding:0; 
}


}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
   background-image: url('images/sfondo-mobile.png');
    
    
}


.wrapper {
    width: 100%;
    height:400px;
    border: 0px solid black;
    position:absolute;
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    border: 0px solid;
    position:absolute;
top:50%; 
left:50%; 
margin-left:-212px; 
margin-top: -200px; 
padding:0; 
}


}


@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
body {
    /* The file size of this background image is 93% smaller
     * to improve page load speed on mobile internet connections */
   background-image: url('images/sfondo-mobile.png');
    
    
}


.wrapper {
    width: 100%;
    height:400px;
    border: 0px solid black;
    position:absolute;
    background-image: url('images/logo.png');
    background-repeat: no-repeat;
    background-size: contain;
    border: 0px solid;
    position:absolute;
top:50%; 
left:50%; 
margin-left:-212px; 
margin-top: -200px; 
padding:0; 
}


}

[fcaldera]

hai impostato il meta viewport nell'head?

[inkemodo]

No! Quelle e perché?

[stardom]

Prima di postare ho fatto la mia ricerca, ed ho trovato questo post in cui l'utente ha utilizzato lo stesso codice che sto cercando di far funzionare per avere una background image responsive. Anche se è vecchio, spero in un aiuto. Perchè questo codice

body {background: url('/airplane.jpg') center center cover no-repeat fixed;}
@media only screen and (max-width: 767px) {body {background-image: url('/airplane.jpg');}}

non funziona in questa pagina, dove l'immagine non riempie in pieno lo schermo per piccoli schermi?