Pregunta

¿Hay alguna manera de hacer un tramo imagen de fondo en lugar de repetir?

¿Fue útil?

Solución

No utilizar ningún tipo de multi-navegador compatible con CSS (no la propiedad background-size sin embargo.)

Si esto está dirigido a cualquier navegador, en particular, podría ser posible. De lo contrario, tendrá que utilizar un <img> y estirar eso.

Así es como se hace en los navegadores recientes:

body {
    background-image: url(bg.jpg);
    -moz-background-size: 100% 100%;     /* Gecko 1.9.2 (Firefox 3.6) */
    -o-background-size: 100% 100%;       /* Opera 9.5 */
    -webkit-background-size: 100% 100%;  /* Safari 3.0 */
    -khtml-background-size: 100% 100%;   /* Konqueror 3.5.4 */
}

De lo contrario, el uso de un <img>:

img#background {
    /* height: 100%; Note: to keep ratio, don't use height */
    left: 0;
    position: fixed; /* or absolute, if you like */
    top: 0;
    z-index: -1;
    width: 100%;
}

Otros consejos

Sólo CSS3

Se podría utilizar una imagen y ajuste que es ancho y la altura a 100%, z-index a la posición -1 a absoluta. Eso podría funcionar.

fondo de tamaño es CSS3 y no es compatible. Usted podría tomar un vistazo a este artículo: ¿Cómo se estira una imagen de fondo en una Página web

Espero que esto ayude.

body
{ 
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

http://www.w3schools.com/css/css_background.asp

Esto no streach su imagen, sino que hará que la imagen no se repita.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top