He probado dos codigos para que un fondo de pantalla sea responsive y que al ver la web desde el movil cargue una imagen distinta mejor adaptada.
mi sorpresa es que funciona cuando modifico el tamaño de la ventana en el pc, pero cuando lo miro desde el movil carga la imagen inicial
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>resposive</title>
<link rel="stylesheet" href="inicio.css">
<link rel="stylesheet" media="only screen and (max-width: 480px)" href="movil.css">
</head>
<body>
</body>
</html>
body {
background-image: url(images/fondo.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#596054;
}
body {
background-image: url(images/inicio-movil.jpg);
background-position: top left;
}
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>resposive</title>
<link rel="stylesheet" href="inicio.css">
</head>
body {
background-image: url(images/fondo.jpg);
background-position: top center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color:#596054;
}
@media only screen and (max-width: 767px) {
body {
background-image: url(images/inicio-movil.jpg);
background-position: top left;
}
}
un saludo y gracias
