Tengo
body {
background: url(images/background.svg);
}
El efecto deseado es que esta imagen de fondo tenga una anchura igual a la de la página, cambiando la altura para mantener la proporción. Por ejemplo, si la imagen original resulta ser 100*200 (cualquier unidad) y el cuerpo tiene 600px de ancho, la imagen de fondo debería terminar siendo 1200px de alto. La altura debería cambiar automáticamente si se cambia el tamaño de la ventana. ¿Es esto posible?
De momento, parece que Firefox hace que la altura se ajuste y luego ajusta la anchura. ¿Esto se debe quizás a que la altura es la dimensión más larga y trata de evitar el recorte? Yo quiero recortar verticalmente y luego desplazarme: no repetir horizontalmente.
Además, Chrome coloca la imagen en el centro, sin repetición, incluso cuando se da explícitamente background-repeat:repeat
, que es el valor por defecto de todos modos.
Existe una propiedad CSS3 para esto, a saber, background-size
(control de compatibilidad). Aunque se pueden establecer valores de longitud, normalmente se utiliza con los valores especiales contain
y cover
. En su caso concreto, debería utilizar cover
:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
contain
y cover
Perdón por el mal juego de palabras, pero voy a utilizar la imagen del día por Biswarup Ganguly para la demostración. Digamos que esta es tu pantalla, y el área gris está fuera de tu pantalla visible. Para la demostración, voy a asumir una relación de 16x9.
Queremos utilizar la mencionada imagen del día como fondo. Sin embargo, recortamos la imagen a 4x3 por alguna razón. Podríamos establecer la propiedad background-size
a alguna longitud fija, pero nos centraremos en contain
y cover
. Tenga en cuenta que también asumo que no manipulamos la anchura y/o la altura de body
.
contain
contener Escala la imagen, conservando su relación de aspecto intrínseca (si la hay), al mayor tamaño que permita que tanto su anchura como su altura quepan dentro del área de posicionamiento del fondo.
Esto asegura que la imagen de fondo esté siempre completamente contenida en el área de posicionamiento de fondo, sin embargo, podría haber algún espacio vacío rellenado con su color de fondo
en este caso:
cover
cover Escala la imagen, preservando su relación de aspecto intrínseca (si la hay), al tamaño más pequeño tal que tanto su anchura como su altura puedan cubrir completamente el área de posicionamiento del fondo.
Esto asegura que la imagen de fondo cubra todo. No habrá color de fondo
visible, sin embargo, dependiendo de la relación de la pantalla' una gran parte de su imagen podría ser cortada:
Comienza el fragmento de código: js -->
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
Fin del fragmento;
Basándome en los consejos de https://developer.mozilla.org/en-US/docs/CSS/background-size terminé con la siguiente receta que me funcionó
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
No estoy seguro de lo que está buscando exactamente, pero debería consultar estas excelentes publicaciones del blog escritas por Chris Coyier de CSS-Tricks:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Lea las descripciones de cada uno de los artículos y vea si son lo que está buscando.
El primero responde a la siguiente pregunta:
¿Existe una forma de hacer que una imagen de fondo sea redimensionable? Es decir, llenar el fondo de una página web de borde a borde con una imagen, sin importar el tamaño de la ventana del navegador. También, hacer que se redimensione más o menos a medida que cambia la ventana del navegador. Además, asegúrese de que mantiene su proporción (no se estira de forma extraña). Además, no provoca barras de desplazamiento, sólo se corta verticalmente si es necesario. Además, entra en la página como una etiqueta inline .
El segundo post's objetivo es conseguir lo siguiente, una "imagen de fondo en un sitio web que cubre toda la ventana del navegador en todo momento"
Espero que esto ayude.