Cómo corregir la imagen de fondo dentro div

Question

he descubierto un problema bastante extraño, que creo que sé cómo explicarlo; Sólo que no sé cómo solucionarlo!

I tiene una página con un div # recipiente (un div con 100% min-altura (altura para IE)) que contiene una cabecera, una "página de contenido" y un pie de página. La imagen de fondo del div # contenedor se supone que es fijo (no background-attachment: fixed posición, pero lo que hace el seguimiento de la imagen cuando se desplaza fija).

El problema es, que la unión cuando se fija se añade al fondo-tag en CSS, la imagen de fondo se posiciona fuera de la div.

El CSS es como sigue: (sin 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; es centrar el div y lo !important en el primer height: es hacer caso omiso de que IE altura determinada etiqueta. Esto es necesario si min-height: 100% debería funcionar.

Cuando agrego esto ...

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%;
}

... la imagen de fondo se está moviendo fuera del div. Voy a explicar esto:. La única parte visible de la imagen de fondo es lo que está todavía dentro del <div id="container"> sino una parte de la imagen se ha movido fuera del div y ahora es invisible

Para resumir ...

Cuando la imagen de fondo está fija, la imagen de fondo se oculta en parte, moviéndose fuera del div. La imagen se está posicionando a la parte superior derecha de la ventana del navegador , no a la parte superior derecha de la div.

Espero que ustedes me puede ayudar!

Answer 1

Este comportamiento es realmente correcto. Cualquier fondo que es attachment: fixed será relativo a la vista, no el elemento que se aplica. Esto es en realidad la base de Eric Meyer Complejo espiral de demostración.

Answer 2

Si bien no se puede tener una posición de fondo fijo dentro de un div, la solución más fácil sería crear un div el tamaño de la imagen. Hacer que la imagen de fondo, y la puso a position:absolute en la esquina superior derecha de la div que quiere colocó en el uso de right:0px;top:0px. Asegúrese de que el div padre es position:relative o no será una posición absoluta dentro de ese div.

Answer 3

Usted debe tratar de añadir la propiedad background-origin , tal vez el valor border-box va a resolver tu problema. También es posible que desee para definir background-size, tenga en mente y cover contain son compatibles y muy útil.