0
.al-hero-header {
    background-image: linear-gradient(to right, rgba(210, 210, 210, 0.2), rgba(216, 216, 216, 0.2)), url(../img/Portades_HOME.jpg);
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

El problema viene que cuando se ve desde ipad o desde cualquier móvil, la re-dimensión a otros dispositivos parece como si el fondo no estuviera en cover si no en auto.

Desde pc se ve bien, con las herramientas de desarrollador o desde las diferentes paginas para ver responsive, pero es abrirlo en ipad por ejemplo y no se ve como toca o desde el móvil ver las re-dimensiones y se ve mal también.

https://mariadelmarvanrell.com/

2
  • Hola, bienvenid@ a StackOverflow en español, te sugiero hacer el recorrido de bienvenida para que tengas una mejor idea sobre el funcionamiento de la pagina y puedas dar a conocer tu pregunta de mejor manera. También puedes revisar ¿Cómo elaboro una buena pregunta?. Saludos. Commented el 9 ago. 2019 a las 14:01
  • Saludos, lo que veo es que la página no es responsive, es decir, el problema no solo radica en el fondo, el problema se encuentra en toda la estructura de la página, para corregir este inconveniente debes volver a plantear tú página de manera responsive.
    – jsdnlb
    Commented el 9 ago. 2019 a las 14:24

1 respuesta 1

2

El problema es que estan pisando el background-image para resoluciones menores a 480px.
En el archivo creative.css, esta es la regla que pisa el estilo:

// Linea 11839
@media (max-width: 480px) and (min-width: 320px) {

// Linea 11861
.al-hero-header, .al-hero2-header, .al-heron-header, .al-heroc-header {
  background-image: linear-gradient(to right, rgb(162, 128, 27), rgb(169, 112, 31)) !important;
}

Solución:

Sacar de la regla el selector .al-hero-header o eliminarla completamente.

Ejemplo:

// Linea 11861
.al-hero2-header, .al-heron-header, .al-heroc-header {
  background-image: linear-gradient(to right, rgb(162, 128, 27), rgb(169, 112, 31)) !important;
}

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.