background in device mobile

**nextpic** · 17-01-2014, 22:42

Ciao a tutti, ho questo problema che credo sia banale ma non riesco a risolvere.
Ho questo codice html:

codice:

<body>
   <header id="header">
       ......
   </header>
.....
</body>

per cui ho creato questa proprietà css:

codice:

#header {
    background:url(../images/sf_head2.jpg) center center no-repeat;
    background-size:cover;
    -moz-background-size:cover;
    -ms-background-size:cover;
    -o-background-size:cover;
    -webkit-background-size:cover;
}

Quando visualizzo il sito su pc desktop tutto è perfetto, quando invece lo visualizzo su dispositivi mobili quali smartphone o tablet, l'immagine di sfondo del di #header viene "limitata" ala grandezza dello schermo del device sul quale viene vista, lasciandomi parte della pagina senza nessuna immagine.

Come posso risolvere questo problema?
Grazie mille a tutti

**deleted_20210415** · 18-01-2014, 06:57

Potresti postare HTML (relativo all'header) e CSS completo?
Da quel che dici lasci intendere che l'header dovrebbe essere full-screen

**nextpic** · 18-01-2014, 08:53

Esatto, l'immagine è un full screen e si adatta alla larghezza dello schermo.

**deleted_20210415** · 18-01-2014, 12:46

Prima devi impostare l'header full screen, non basta solo il background

**nextpic** · 18-01-2014, 12:58

Ossia dando a #header whid:100%; ?

**deleted_20210415** · 18-01-2014, 13:10

Width, comunque si, prova intanto così e facci risapere

**deleted_20210415** · 19-01-2014, 11:47

Prova così: aggiungi uno script jQuery (sempre che tu abbia già jQuery nel tuo progetto), dovrebbe funzionare se vuoi un header che occupi tutta la pagina...

codice:

(function($) { 
 $(document).ready(
  function() {
   function full() {
        $('#header').css({
            position: 'absolute',
            width: $(window).width(),
            height: $(window).height()
        });
    }
    $(window).resize(function() {
        full();   
        center();
    });
    full();
  });
})(jQuery);

Discussione: background in device mobile

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

background in device mobile

Permessi di invio