Background full screen

**fermat** · 23-09-2016, 15:48

ciao!

dovrei mettere una immagine di sfondo che sia sempre alla massima dimensione rispetto al browser.
ho una immagine 1920x1080 ed ho provato così:

codice:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        body {
            background: url('images/1920.jpg') no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>
    <body>
    </body>
</html>

in generale funziona, a parte il fatto che mozza una parte in alto e una in basso.
in sostanza si vede bene nella sua interezza quando riduco molto la dimensione del browser.
dove sbaglio??

**hidran** · 23-09-2016, 16:15

Se usi background-size:cover, va in contradizione con fixed.
Prova a togliere la proprietà fixed e lascia solo il background-size

**fermat** · 23-09-2016, 16:36

Originariamente inviata da hidran

Se usi background-size:cover, va in contradizione con fixed.
Prova a togliere la proprietà fixed e lascia solo il background-size

ciao!

ho messo così, levando anche la position perchè sennò veniva uno spazio bianco sotto:

codice:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        body {
            background-image: url('images/1920.jpg');
            background-repeat: no-repeat;
            /*background-position: center center;*/
            /*background-attachment: fixed;*/
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
        }
    </style>
    <body></body>
</html>

diciamo che così mi taglia solo un pezzo in basso.

**hidran** · 23-09-2016, 17:10

Allega l'immagine così possiamo testare...
un'altra cosa che si può fare è background-size:100% 100%

**fermat** · 23-09-2016, 17:20

ciao.

non riesco ad allegare l'immagine perchè mi dice che è troppo grande.

quindi vi giro anche il link della pagina, perchè mi rendo conto che non è facile capirsi senza vedere le immagini: http://www.lookita.com/new/

questo il link diretto all'immagine: http://www.lookita.com/new/images/LookITA1920.jpg

**hidran** · 23-09-2016, 18:27

Il problema è che il background-size: cover, lavora sul contenuto del tag <body>, che attualmente è vuoto.

Se non hai del contenuto, devi impostare un'altezza così almeno il browser sa cosa "coprire" .

se metti, ad esempio height:400px; non lascia lo spazio sotto.
Devi pensare che cosa avrà quella pagina, se farà scroll o no, se il contenuto avrà la stessa altezza ecct.

Poi dovresti resettare margin, padding a zero, allineamento testo ecct.
Una volta che hai fatto il reset per tutti i browser ( puoi includere il css, cerca su google normalize), allora
metti il resto

**VinzClortho** · 25-09-2016, 04:22

Così funziona (mancava l'altezza):

codice:

html, body {
height: 100%;
margin: 0;
padding: 0;
}

Se usi background-size:cover, va in contradizione con fixed.

Perchè mai dovrebbero contraddirsi, sono entrambe proprietà di background:
http://www.w3schools.com/cssref/tryi...tachment_fixed

**fermat** · 26-09-2016, 09:43

ciao!
allora, la pagina non ha scroll.
al centro dovrò mettere solo un piccolo logo con un form per le email e un bottone.
tutto affiancato.
quindi:
- il background sempre visibile a dimensione browser e responsive
- sopra e centrato un piccolo form

ho fatto diversi altri tentativi, anche inserendo quello che mi ha scritto VinzClortho:

codice:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Lookita</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            body {
                background-image: url('images/LookITA1920.jpg');
                background-repeat: no-repeat;
                /*background-position: center center;*/
                /*background-attachment: fixed;*/
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }
        </style>
    </head>
    <body></body>
</html>

però continuo ad avere una parte mozzata (o sopra o sotto).

ma se lo mettessi in div con dimensioni 100%??

**fermat** · 26-09-2016, 15:25

allora, ho aggiunto anche il div che deve stare in mezzo alla pagina.
questo il codice:

codice:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Lookita</title>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css">
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }

            body {
                background-image: url('images/LookITA1920.jpg');
                background-repeat: no-repeat;
                background-position: center center;
                background-attachment: fixed;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }

            .outer {
                display: table;
                position: absolute;
                height: 100%;
                width: 100%;
            }

            .middle {
                display: table-cell;
                vertical-align: middle;
            }

            .reg {
                width: 518px;
                margin: 0 auto;
                height: 100px;
                border: 1px solid black;
                background-color: rgba(0,0,0,0.5);
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="middle">
                <div class="reg">
                    <img src="images/LOOKITA_NERO.jpg" alt="LookITA" style="float: left;" width="155">
                    <input type="email" id="email" style="float: left;">
                    <button type="button" id="send" style="float: left;">Registrati</button>
                    <div style="clear: both"></div>
                </div>
            </div>
        </div>
    </body>
</html>

continua ad essere mozzata (o sopra o sotto, dipende dal position e attachment).
ho provato anche a metterlo come background del div, ma è uguale.

qualche altra idea??

**VinzClortho** · 26-09-2016, 18:04

continua ad essere mozzata (o sopra o sotto, dipende dal position e attachment).
ho provato anche a metterlo come background del div, ma è uguale.
qualche altra idea??

Che intendi con mozzato, a me sempra sia a posto così (testato su ff e chrome). Se intendi che si taglia una parte dell'immagine in base alle dimensioni del viewport, è normale ed è giusto che sia così. Sono semmai le proporzioni dell'immagine originale ad adattarsi poco a quelle dalla maggior parte degli schermi. Ti conviene giocartela con proporzioni 16:9 (1920×1080) e 16:10 (1920×1200), in modo che su schermi 4:3 venga tagliata la larghezza e non l'altezza.

Discussione: Background full screen

Strumenti discussione

Ricerca discussione

Visualizza

Background full screen

Permessi di invio