Tengo un div que se ajusta vertical y horizontalmente al tamaño del navegador, y pretendo meterle un fondo que se ajuste también vertical y horizontalmente al tamaño del navegador, pero al utilizar background-size: 100% 100%; la imagen de fondo se deforma:
¿hay alguna forma de bloquear la proporción alto-ancho de la imagen para que se adapte al tamaño del navegador sin deformarse?
Código :
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<style>
#fondo{
height: 100%;
position: fixed;
width: 100%;
z-index: -1;
background-color: #fff;
background-position: 100.% center;
background-repeat: no-repeat;
background-image: url(Sin-t%C3%ADtulo-1.jpg);
background-position: center bottom;
background-size: 100% 100%;
}
</style>
</head>
<body>
<section id="fondo"></section>
</body>
</html>
