html - toda - CSS: ¿Es posible repetir solo parte de una imagen para usarla como fondo?

imagen de fondo html5 css3

Question

tengo una imagen que es un rectángulo de esquina redondeada, la uso para la parte superior e inferior del fondo usando:

#content_top { /* 760px by 30px */
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 0 scroll;
    height: 10px;
}

#content_bottom { /* 760px by 30px */
    background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 -20px scroll;
    height: 10px;
}

luego uso otra imagen de 1px de altura para repetir verticalmente y llenar el área intermedia para el fondo de este div. Me gusta esto:

#content { /* 760px by 1px */
    background: #F7EECF url(images/content_body.png) repeat-y 0 0 scroll;
}

ahora me pregunto si es posible usar la misma imagen (content_top_bottom.png), pero solo una parte, para lograr el mismo efecto. Intenté algo como esto, pero no funcionó:

#content { /* 760px by 1px */
    background: #F7EECF url(images/content_top_bottom.png) repeat-y 0 -5px scroll;
}

Quiero usar la misma imagen porque quiero reducir el número de solicitudes HTTP. la imagen de 1px probablemente no tendrá un gran impacto, pero solo quiero intentarlo. alguien puede ayudar?

Answer 1

Haga la imagen 2280 x 10 colocando las partes superior, media e inferior una al lado de la otra. Entonces puedes repetir la parte media:

#content_top {
  background: #F7EECF url(images/content_bg.png) no-repeat 0 0 scroll;
  height: 10px;
}

#content {
  background: #F7EECF url(images/content_bg.png) repeat-y -760px 0 scroll;
}

#content_bottom {
  background: #F7EECF url(images/content_bg.png) no-repeat -1520px 0 scroll;
  height: 10px;
}

Answer 2

Sugeriría usar 3 imágenes en todo el sitio:

1. Sprites estándar no repetitivos. Este sería el content_top_bottom.png en su caso (aunque puede ser mejor cambiarle el nombre para que sea más genérico y pueda usarse para otras partes).
2. Una imagen "repeat-x". Esta sería una imagen de 1px de ancho (o un poco más, dependiendo del diseño) pero muy alta. En esto pondrías todas las imágenes que se repiten horizontalmente.
3. Una imagen "repeat-y", similar a # 2 excepto 1px alto y muy ancho. Aquí pondría su imagen content_body.png .

Aunque en su caso actual esto resulta en 2 solicitudes HTTP, es mucho más escalable porque no usará más de 3. Lamentablemente, para los fondos que unen ambas direcciones, tienen que ser individuales.

También puede interesarle leer sobre la propiedad CSS3, border-image , que le permitirá usar una imagen para un elemento completo. Todavía no está bien soportado pero espero que no sea demasiado largo.