1

Estoy usando un jumbotron con un fondo de imagen que queda bien en pantallas grandes. Cómo podria colocar otro fondo de imagen al jumbotron cuando se acceda desde un dispositivo móvil?

Intente usar @media dentro de un condicional Html, porque quiero que esto suceda para una sección específica de la web.

  <div class="jumbotron">
  <div class="container"> 
  ...
  <div>
  <div>
  ***
   <b:if cond='data:blog.url == &quot;...&quot;'>
<style type='text/css'>

 
.jumbotron {
   background:linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 70%), url(img 1.jpg) no-repeat center ;
  background-attachment:fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;

}
  

 @media only screen and (max-width: 600px) {

   
.jumbotron {
   background:linear-gradient(to bottom, rgba(0,0,0,0.3) 0%,rgba(0,0,0,0.3) 100%), url(img 2.jpg) no-repeat center ;
  background-attachment:fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
 

  
   }

  }
  
  </style>

3
  • ¿Conicionales en HTML? aparte de los cometnarios condicionales de microsoft IE no me suena.
    – Juan
    el 31 ago. 2021 a las 8:10
  • Estoy trabajando en blogger, y ese condicional en html me permite personalizar una sección especifica. La idea es colocar un fondo de imagen distinto dependiendo si el usuario ingresa con pc o un dispositivo móvil. el 31 ago. 2021 a las 16:06
  • ya lo logré, usando el media fuera del condicional de html, pero ahora tengo un problema, el background en el dispositivo móvil como que salta al desplazarme hacia abajo de la web. Uso background fijo. En cuanto a PC, la imagen permanece fija al desplazarme sin que salte la imagen de fondo. el 31 ago. 2021 a las 17:07

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.