¿Cómo estiro una imagen de fondo para cubrir todo el elemento HTML?

89

Estoy tratando de obtener una imagen de fondo de un elemento HTML (cuerpo, div, etc.) para estirar todo su ancho y alto.

No tengo mucha suerte. ¿Es posible o tengo que hacerlo de otra manera además de ser una imagen de fondo?

Mi CSS actual es:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

Gracias por adelantado.

Editar: No estoy interesado en mantener el CSS en la sugerencia de Gabriel, así que cambiaré el diseño de la página. Pero esa parece la mejor respuesta, así que la estoy marcando como tal.

Hongo
fuente
Por supuesto, podría usar JavaScript para hacer esto dinámicamente, pero eso probablemente sería peor que los trucos CSS sugeridos por el enlace de gabriel1836.
Jason Bunting
Para conservar la relación de aspecto de la imagen, debe utilizar "background-size: cover;" o "tamaño de fondo: contener;". He construido un polyfill que implementa esos valores en IE8: github.com/louisremi/background-size-polyfill
Louis-Rémi

Respuestas:

194
<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>
Nathan
fuente
Esto también funciona como etiquetas de estilo dentro de elementos html o en archivos css.
Nathan
2
esta es la mejor solución que existe.
AFD
1
¿Cuál es la diferencia entre cobertura y 100% 100%?
Pacerier
4
100% 100% no mantiene la relación de aspecto de la imagen original. 'cubrir' escala la imagen, al tiempo que conserva su relación de aspecto intrínseca (si la hubiera), al tamaño más pequeño, de modo que tanto su ancho como su altura puedan cubrir completamente el área de posicionamiento del fondo. También puede usar 'contener' para escalar la imagen, mientras conserva su relación de aspecto intrínseca (si la hubiera), al tamaño más grande, de modo que tanto su ancho como su altura puedan caber dentro del área de posicionamiento del fondo.
Mike737
"-webkit-background-size: cover;" no es una propiedad CSS3 válida.
VoidKing
8

En resumen, puedes probar esto ...

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

Donde he usado pocos css y js ...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

Y me está funcionando bien.

Tamal Samui
fuente
¡Para aquellos que NO quieren mantener la relación de aspecto!
BillyNair
6

No estoy seguro de que sea posible estirar una imagen de fondo. Si encuentra que no es posible, o que no es confiable en todos sus navegadores de destino, puede intentar usar una etiqueta img estirada con un índice Z más bajo y una posición establecida en absoluto para que aparezca otro contenido encima.

Háganos saber lo que termina haciendo.

Editar: Lo que sugerí es básicamente lo que está en el enlace de Gabriel. Así que prueba eso :)

Travis Collins
fuente
1
Vi esta técnica en acción hace al menos una década. No puedo imaginar que todavía no funcione ahora.
párpados
5

Para expandir la respuesta de @PhiLho, puede centrar una imagen muy grande (o una imagen de cualquier tamaño) en una página con:

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

O puede usar una imagen más pequeña con un color de fondo que coincida con el fondo de la imagen (si es un color sólido). Esto puede o no adaptarse a sus propósitos.

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}
Traingamer
fuente
4

Si necesita estirar su imagen de fondo mientras cambia el tamaño de la pantalla y no necesita compatibilidad con versiones anteriores del navegador, esto hará el trabajo:

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
leocborges
fuente
3

Si tiene una imagen de paisaje grande, este ejemplo cambia el tamaño del fondo en modo vertical, de modo que se muestre en la parte superior, dejando en blanco la parte inferior:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}
vive el amor
fuente
3

El siguiente código que utilizo principalmente para lograr el efecto solicitado:

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
Badar
fuente
3
Necesitasbackground-size: 100% 100%;
Sablefoste
No sé qué navegador usas, pero lo que te he dicho me funciona en Firefox y Chrome.
Badar
2
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
Behnam Mohammadi
fuente
0

No se puede en CSS puro. Tener una imagen que cubra toda la página detrás de todos los demás componentes es probablemente su mejor opción (parece que esa es la solución dada anteriormente). De todos modos, lo más probable es que se vea horrible de todos modos. Intentaría con una imagen lo suficientemente grande para cubrir la mayoría de las resoluciones de pantalla (digamos que hasta 1600x1200, arriba es más escasa), para limitar el ancho de la página, o simplemente para usar una imagen en ese mosaico.

PhiLho
fuente
0

imagen{

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%; 
Ebele Nwaelene
fuente
2
¡Bienvenido a SO! Para escribir una mejor respuesta, agregue un razonamiento sobre por qué funciona y muestre el código en acción. También puede leer sobre cómo escribir una buena respuesta .
desplazadotexan
0

Simplemente haga que un div sea el hijo directo de body (con el nombre de clase bg por ejemplo), que abarque todos los demás elementos del cuerpo, y agréguelo al archivo CSS:

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

Consulte este enlace: https://www.w3schools.com/css/css_rwd_images.asp Desplácese hacia abajo hasta la parte que dice:

  1. Si la propiedad de tamaño de fondo se establece en "100% 100%", la imagen de fondo se ampliará para cubrir toda el área de contenido.

Allí muestra el 'img_flowers.jpg' que se extiende hasta el tamaño de la pantalla o el navegador, independientemente de cómo lo cambie.

Salah Ayman
fuente
-1

Esto funciona para mi

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
msk_sureshkumar
fuente