Ocultar imagen en móviles añadida en el Header

[Hojalaparra]

Hola,

 

he añadido en el header un banner directamente a través del global.css añadiendo:

 

#header {

 

  background:no-repeat url('../img/header/banner-envio-gratis.png') whitesmoke;

  background-position: center;   

  z-index: 5003;

} 

 

 

el problema que tengo es que quiero deshabilitar esta imagen para  temas móviles, o para pantallas inferiores a 767 pixeles, he visto que tengo que añadir algo tal que así:

 

@media screen and (max-device-width : 480px) {

 

        #header{

            display:none;

            }

 

pero el problema es que lógicamente se me oculta todo el header, alguien me puede ayudar para que solo se oculte el banner que le he introducido??

Saludos cordiales

[ventura]

@media screen and (max-device-width : 480px) {

 

#header{

background:none;

}

}

 

Edited September 2, 2015 by ventura (see edit history)

[Hojalaparra]

Gracias, jope, si que era simple, no se como no lo vi... esto es lo que pasa cuando aprendes a base de horas y horas...

 

al final lo dejé como así:

#header {

  

  background:no-repeat url('../img/header/banner-envio-gratis.png') whitesmoke;

  background-position: center; 

  z-index: 5003;

}

 

@media screen and (max-device-width : 767px) {

 

        #header{

            background:none;

            }

 

 

 

y todo correcto. Muchas gracias!

[Hojalaparra]

Vaya, pense que funcionaba correctamente, ahora lo que me pasa es que en el tema móvil se me ha ocultado, pero el tema web me aparece todo descolocado y mal.... qué puede ser? 

[Hojalaparra]

Me faltaba un corchete,

tema solucionado:

 

 

#header {

  

  background:no-repeat url('../img/header/banner-envio-gratis.png') whitesmoke;

  background-position: center; 

  z-index: 5003;

}

@media screen and (max-device-width : 767px) {

 

        #header{

            background:none;

          }

}

 

Saludos!