inicio css repitiendo fondo de la posición definida

#container{ 
    background:url(images/bg-main.png) repeat-y; 
    width: 903px; 
    background-position: 0px 687px; 
    background-position: bottom; 
    height: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
    } 
#content{ 
    background:url(images/bg-wood.png) repeat-y; 
    width: 903px; 
    height: 678px; 
    margin-left: auto; 
    margin-right: auto; 
    }

#content div está dentro #container div. Quiero que el fondo de #container comience a repetirse a 687px desde arriba. ¿Es posible?inicio css repitiendo fondo de la posición definida

EDITAR: ¿Es posible que los primeros x píxeles de div (desde arriba) tengan espacio vacío y después de que comience x pix pix back?

Fuente

2011-04-09 ilija veselica

background : url('image path') 0px 287px repeat-y;

Esto repetirá verticalmente su imagen de fondo desde 287px desde la parte superior.

pero de otra manera es establecer esto a su contenido div:

margin-top:287px;

que mejor solución es hacer de esta manera:

#container{ 
    position:relative; 
    } 


#background{ 
    background:url('image url'); 
    position:absolute; 
    top:287px; 
    left:0px; 
    z-index:100; 
    } 

#content{ 
    position:absolute; 
    top:0px; 
    left:0px; 
    z-index:99999; 
    }

Fuente

2011-04-09 11:20:48

su primera sugerencia Cómo funciona la nota. 287px 0px - el primer valor aquí es posición horizontal, no vertical. Pero esta segunda solución parece estar bien y tendré que definir su altura usando jquery –

@ile corrected;) –

'background: url ('ruta de la imagen') 0px 287px repeat-y;' esto es algo que ya intenté (usted puede verificar mi pregunta (línea 2 y línea 4) - pero no funciona :) –

Por lo que yo sé que no es posible cómo' Intentando hacerlo, repeat-x y repeat-y, repetirá la imagen en ambas direcciones a lo largo del eje

si repite el fondo del contenedor, la imagen de fondo del contenido div no se cubre t el primero 678px de todos modos?

puede ofrecerle código en un jsFiddle para que podamos ver el efecto que está tratando de lograr que habrá una manera;)

Fuente

2011-04-09 11:37:23 clairesuzy

Esto se puede conseguir con elemento seudo (::before o ::after) y aprovechar las calc() para el desplazamiento.

Pseudo elemento le dará más control y no afectará el contenido y no requiere la necesidad de una etiqueta HTML adicional.

Aquí es un ejemplo básico con 100px desplazamiento desde la parte superior:

.background { 
 
    height: 300px; 
 
    border:1px solid; 
 
    position: relative; 
 
} 
 

 
.background::before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    height: calc(100% - 100px); 
 
    width: 100%; 
 
    display: block; 
 
    box-sizing: border-box; 
 
    background: url(//placehold.it/100x100); 
 
}

<div class="background"></div>

También se puede utilizar el mismo techique para compensar desde la izquierda:

.background { 
 
    height: 300px; 
 
    border:1px solid; 
 
    position: relative; 
 
} 
 

 
.background::before { 
 
    content: ''; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    height: 100%; 
 
    width: calc(100% - 100px); 
 
    display: block; 
 
    box-sizing: border-box; 
 
    background: url(//placehold.it/100x100); 
 
}

<div class="background"></div>

o incluso de ambas direcciones (invertido, también!):

.background { 
 
    height: 300px; 
 
    border:1px solid; 
 
    position: relative; 
 
} 
 

 
.background::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: calc(100% - 100px); 
 
    width: calc(100% - 100px); 
 
    display: block; 
 
    box-sizing: border-box; 
 
    background: url(//placehold.it/100x100); 
 
}

<div class="background"></div>

Fuente

2016-09-21 00:10:31 Aziz

inicio css repitiendo fondo de la posición definida

Respuesta

Cuestiones relacionadas