CSS: posición de fondo con repetición?

Question

Actualmente tengo una imagen que se repite en y, pero quiero que comience 20 px desde donde se inicia el div ....

¿cómo puedo hacer eso?

Answer 1

Quizás debería usar :after o :before para esto, porque no hay necesidad de agregar marcas adicionales en su HTML. De esta manera:

.container{ 
    height:400px; 
    background:red; 
    position:relative; 
    width:400px; 
} 
.container:after{ 
    content:""; 
    position:absolute; 
    top:20px; 
    left:0; 
    right:0; 
    bottom:0; 
    background:url(http://lorempixel.com/400/200) repeat-y; 
} 

Marque esta http://jsfiddle.net/h6K9z/

Funciona en IE8 & anteriormente. Para IE7 o IE6 puedes dar DIV extra para esto.

Answer 2

Sólo se necesita la propiedad background-position a fijarse:

background-position: 0px 20px; 
background-repeat: repeat-y; 

Answer 3

.yourClass{ 
    background: url(images/yourImage.png) repeat-y; 
    background-position: 0px 20px; 
} 

http://www.w3schools.com/css/pr_background-position.asp

Answer 4

Yo prefiero el método abreviado:

.yourClass { 
    background: url(../images/yourImage.png) repeat-y 0 20px; 
} 

Answer 5

No creo que la simple combinación de background-position y background-repeat por ej. repeat-y 0 20px funcionará. Suponiendo que jsFiddle sample representa el caso de OP, la solución debe hacer que el fondo verde comience en (vertical) 20px; el "¡Hola!" el texto no debe estar sobre el fondo verde.

Mi respuesta es que esto no se puede hacer de manera simple por CSS; lo que significa que es posible que desee cambiar su estructura HTML para lograr su objetivo. Sin embargo, estoy empezando una recompensa con la esperanza de que otros obtengan mejores respuestas.