Come risolvere immagine di sfondo all'interno div

Question

ho scoperto un problema piuttosto strano, che credo di sapere come spiegare; Solo che non so come risolvere il problema!

Ho una pagina con un contenitore div # (un div con il 100% min-height (altezza per IE)) che contiene un'intestazione, un "page-content" e un piè di pagina. Si suppone L'immagine del contenitore div # sfondo da fissare (non fisso posizione, ma background-attachment: fixed che rende il follow immagine quando si scorre).

Il problema è, che l'attaccamento quando fissa viene aggiunta al background-tag nel CSS, l'immagine di sfondo è ora posizionato al di fuori della div.

Il CSS è la seguente: (senza background-attachment: fixed;)

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

margin:0 auto; è quello di centrare il div e la cosa !important nel primo height: è quello di rendere IE ignorare quel particolare altezza-tag. Ciò è necessario se min-height: 100% dovrebbe funzionare.

Quando aggiungi a ...

div#container {
    position:relative;
    width:900px;
    margin:0 auto;
    background-color: #ccffff;
    background-image: url("pics/sign.jpg");
    background-attachment: fixed; //This is what is added to the code-sample
    background-repeat: no-repeat;
    background-position: right top;

    height:auto !important;
    height:100%;

    min-height:100%;
}

... l'immagine di sfondo si muove al di fuori del div. Mi spiego:. L'unica parte visibile dell'immagine di sfondo è quello che è ancora all'interno della <div id="container"> ma una parte dell'immagine è spostato al di fuori del div ed è ora invisibile

Per riassumere ...

Quando l'immagine di sfondo è fissa, l'immagine di sfondo è in parte nascosto, spostando al di fuori della div. L'immagine sta posizionando per l'alto a destra del finestra del browser , non in alto a destra del div.

La speranza voi ragazzi mi può aiutare!

Answer 1

Questo comportamento è in realtà corretto. Qualsiasi sfondo che è attachment: fixed sarà relativo alla finestra, non l'elemento che viene applicato. Questo è in realtà la base di di Eric Meyer Complex Spiral demo.

Answer 2

Anche se non si può avere una posizione di fondo fissa all'interno di un div, la soluzione più semplice sarebbe quella di creare un div le dimensioni della vostra immagine. Rendere l'immagine sullo sfondo, e impostarlo position:absolute nell'angolo in alto a destra della div si desidera collocato nel usando right:0px;top:0px. Assicurarsi che il div genitore è position:relative o non sarà posizionato assolutamente all'interno di tale div.

Answer 3

Si dovrebbe cercare di aggiungere la proprietà background-origin , forse il valore border-box risolverà il tuo problema. Inoltre è possibile definire background-size, tenere a mente cover e contain sono supportati e molto utile.