0

Estoy desarrollando una aplicación la cual permite ser adaptativa en los distintos tipos de pantallas pero me estoy encontrando con un "problema", y es que al momento de querer modificar mi clase css con un media query esta clase no lo hace, y la única forma de poder modificar es agregar al final !important, pero he leído que esto es considerado una mala practica, pero hasta ahora no he podido modificar la clase sin agregar el !important. Esta es mi clase css:

.body-login {
    background-image: url('Content/img/0001.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-attachment:fixed;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Y este es el media query con el cual intento modificar la clase css:

@media only screen and (max-width: 830px) {
    .body-login {
        background: none !important;
    }
}
6
  • Recuerda agregar el codigo necesario para un ejemplo mínimo verificable !!!
    – Excorpion
    Commented el 31 mar. 2021 a las 21:24
  • Además, tu código funciona, asi que el error está en otro lado. - prueba -
    – Excorpion
    Commented el 31 mar. 2021 a las 21:27
  • Prueba del Fiddle -> jsfiddle.net/4dn0bg2j
    – Excorpion
    Commented el 31 mar. 2021 a las 21:28
  • a mi tambien me parece extraño, estoy verificando si el problema ocurre porque tengo css en el mismo html y la media query en archivo css, lo hago de esa manera pues asi lo hace asp.net Commented el 31 mar. 2021 a las 21:36
  • 1
    solo revisa que el código este así como en el ejemplo, primero tu clase genérica y después tu mediaquery Commented el 31 mar. 2021 a las 23:01

1 respuesta 1

1

si lo que quieres es que no se vea la imagen en la media query seria asi:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<style>
    .body-login {
    background-image: url('/icono.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    background-attachment:fixed;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
@media (max-width: 830px) {
    .body-login {
        background-image: none;
    }
}
</style>
</head>
<body>
    <div class="body-login"></div>
</body>
</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.