background image fullscreen

[indacoravenna]

in un sito uso questa tecnica "CSS-Only Technique #2" http://css-tricks.com/perfect-full-p...kground-image/ per avere un'immagine di sfondo in fullscreen riproporzionata. Fin qui tutto bene ma l'immagine è sempre centrata nella pagina mentre vorrei che il top fosse a 0 e non andasse in negativo. sapete aiutarmi??
Avendo come immagine di sfondo un ritratto se cambio la risoluzione è vero che mantiene le proporzioni ma viene tagliata parte della testa ed è bruttissimo da vedere :-(

[0-c00l]

Prova questo http://www.web-link.it/scripting/E10...ttoschermo.htm

[KillerWorm]

Per impostare la posizione dell'immagine di sfondo si fa riferimento alla proprietà background-position che definisce due valori (posizione orizzontale, posizione verticale). Per specificare questi due valori è possibile utilizzare le parole chiave: right; left; top; bottom; center.
(vedi guida http://css.html.it/guide/lezione/30/...-dello-sfondo/)

Riporto qui il css preso dal link che hai postato e sostituisco il valore "center" (assegnato alla posizione verticale) con il valore "top".

html {
        background: url(images/bg.jpg) no-repeat center top fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

In questo caso l'allineamento verticale resta "ancorato" al top.

[indacoravenna]

Originariamente inviato da KillerWorm
Per impostare la posizione dell'immagine di sfondo si fa riferimento alla proprietà background-position che definisce due valori (posizione orizzontale, posizione verticale). Per specificare questi due valori è possibile utilizzare le parole chiave: right; left; top; bottom; center.
(vedi guida http://css.html.it/guide/lezione/30/...-dello-sfondo/)

Riporto qui il css preso dal link che hai postato e sostituisco il valore "center" (assegnato alla posizione verticale) con il valore "top".

html {
        background: url(images/bg.jpg) no-repeat center top fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}

In questo caso l'allineamento verticale resta "ancorato" al top.

io però avevo indicato la tecnica #2

#bg {
        position:fixed;
        top:-50%;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:auto;
        min-width:50%;
        min-height:50%;
}

riesci a fare la stessa cosa modificando questo codice?

[KillerWorm]

Originariamente inviato da indacoravenna
io però avevo indicato la tecnica #2

Scusami, non avevo capito che ti riferivi a quella parte.
Prova allora a modificare questi valori (segnati in rosso):

#bg {
        position:fixed;
        top:0;
        left:-50%;
        width:200%;
        height:200%;
}
#bg img {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        margin:0 auto;
        min-width:50%;
        min-height:50%;
}

Tieni presente che non ho testato su tutti i browser indicati nel link ma io riscontro comunque (anche senza questa modifica) un non-funzionamento con IE8 su vista.

EDIT: mi correggo.. funziona anche su IE, forse avevo sbagliato qualcosa durante la prova che ho fatto.

[silgmaris]

Scusatemi... ma io ho lo stesso problema... però anche usando i vostri metodi: sia con IE8 che con IE9 l'immagine di sfondo non si adatta MAI allo schermo.

Ho provato i vostri codici ed anche alcuni trovati qua e là:

http://whereswalden.com/files/mozill...age-cover.html
http://css-tricks.com/examples/FullP...rogressive.php

Niente... e qui allora non capisco come mai voi dite che con IE8 funziona, come del resto anche su quei siti si dichiara che con IE8 o IE9 funziona. In realtà io ho esperienza negativa.

Che suggerite?