Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Responsive background image con media queries

HTML - Responsive background image con media queries

Volver
Nuevo Tema
<<>>
 
Vista:

Responsive background image con media queries

Publicado por Miguel (4 intervenciones) el 24/05/2023 10:22:16
Buenas!!

Necesito vuestra ayuda.

Tengo el código siguiente:
1
<div class="swiper-wrapper"> <div class="swiper-slide"> <a class="entry full-size" href="index.html"> <span class="background-wrapper full-size" style="background-image: url(img/1.jpg);"></span>

Quiero que las 4 imagènes sean responsive con media queries
He añadido una class "style-1", "style-2"... pero no me funciona:
1
<div class="swiper-wrapper"> <div class="swiper-slide"> <a class="entry full-size" href="index.html"> <span class="background-wrapper full-size" span class="style-1"></span></span>
y el css:
1
2
@media (max-width: 480px){.span class .style-1 {background-image: url(img/low.jpg); }}
@media (min-width: 481px) and (max-width: 1024px) {span.background-wrapper.full-size {background-image: url(/img/medium.jpg);  }}

Gracias
Un cordial saludo
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Alejandro
Val: 247
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Responsive background image con media queries

Publicado por Alejandro (100 intervenciones) el 25/05/2023 00:08:44
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
No puedes tener 2 atributos class en el mismo tag
1
<div class="swiper-wrapper"> <div class="swiper-slide"> <a class="entry full-size" href="index.html"> <span class="background-wrapper full-size" span class="style-1"></span></span>

1
2
3
4
5
6
<div class="swiper-wrapper">
    <div class="swiper-slide">
        <a class="entry full-size" href="index.html">
            <span class="background-wrapper full-size">
                <span class="style-1"></span>
            </span>

1
2
3
4
<div class="swiper-wrapper">
    <div class="swiper-slide">
        <a class="entry full-size" href="index.html">
            <span class="background-wrapper full-size style-1"></span>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Responsive background image con media queries

Publicado por Miguel (4 intervenciones) el 26/05/2023 09:04:45
Buenos días Alejandro,

Gracias. He corregido según tu respuesta pero sigue sin funcionar.
Aquí el nuevo código:
1
2
3
4
5
6
7
<div class="swiper-wrapper">
 
    <div class="swiper-slide">
 
        <a class="entry full-size" href="index.html">
 
            <span class="background-wrapper full-size style-5"></span>
Y el css
1
2
3
.full-size .style-5{position:absolute;left:0;top:0;width:100%;height:100%}
@media (max-width: 480px){.background-wrapper .full-size .style-5 {background-image: url(/img/medium.jpg); }}
@media (min-width: 481px) and (max-width: 1024px) { .background-wrapper .full-size .style-5 {background-image: url(/img/low.jpg);  }}
Estoy haciendo algo mal pero no veo la solución.
Gracias por ayudarme.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Responsive background image con media queries

Publicado por miguel (1 intervención) el 26/05/2023 15:25:33
Hola Alejandro,

Te he contestado con un post nuevo. No vi que se podía directamente responder con el primero.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 247
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Responsive background image con media queries

Publicado por Alejandro (100 intervenciones) el 26/05/2023 17:19:31
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
1
.background-wrapper .full-size .style-5
En el selector estas diciendo que que aplique al elemento con la clase style-5 que este dentro de un elemento con clase full-size que a su vez esta dentro de un elemento background-wrapper.

Para seleccionar un elemento con múltiples classes debes hacerlo sin espacios.
1
.background-wrapper.full-size.style-5
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Responsive background image con media queries

Publicado por miguel (4 intervenciones) el 29/05/2023 08:36:18
Buenos días Alejandro!

Genial! Me funciona con el responsive del móvil:
1
@media (max-width: 480px){.background-wrapper.full-size.style-5{background-image: url(/img/low.jpg); }}
pero no con el de medias pantallas:
1
@media (min-width: 481px) and (max-width: 1024px) {.background-wrapper.full-size.style-5{background-image: url(/img/medium.jpg);  }}

No entiendo, si funciona con uno porqué no con el de pantalla media ?

Sino, tengo otra pregunta acerca del @media.
Sabes si sé puede utilizar multiples enlaces con varias classes en el mismo @media ?
Tipo algo así:
1
@media (max-width: 480px){.background-wrapper.full-size.style-5{background-image: url(/img/low5jpg),.background-wrapper.full-size.style-6{background-image: url(/img/low6.jpg); }}[

Muchas gracias por tu ayuda

Un cordial slaudo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Responsive background image con media queries

Publicado por Miguel (4 intervenciones) el 30/05/2023 07:34:11
Buenos días Alejandro,
Ok. Gracias por todo.
Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar