Quitar imagen de fondo cuando el navegador se escale

[ceaped]

Buenos días
Utilizo BACKSTRETCH para poner una imagen de fondo.

Con este script se carga la imagen:

Código Javascript:

<script>
$.backstretch(["images/fondo.jpg"]);
</script>
 

Deseo ponerle un condicional que cuando el navegador tenga 900px de ancho se vea la imagen pero si tiene menos de 400px la imagen se quite.

¿Alguien que me puede ayudar?

Gracias por su ayuda

[Alexis88]

Estuve buscando en la documentación del plugin y no encontré nada que ayude, pero con CSS podrías hacerlo así:

Código CSS:

@media all and (min-width: 900px){
    background: "la ruta de la imagen"
}
 

Un saludo

[ceaped]

Hola Alexis88
mmm...asi no se puede pues como la imagen se carga con jquery no la puedo ocultar con:

Código CSS:

body {
    background-image: none;
    background-color: #cccccc;
}
 

Mira como logre eliminar la imagen de fondo cuando el navegador es pequeño (responsive)

Así se carga la imagen:

Código Javascript:

<script>
$.backstretch(["images/fondo.jpg"]);
</script>
 

y de esta manera lo oculto:

Código Javascript:

<script type="text/javascript">
    if( $( document ).width() <= 480 ){
    jQuery('.backstretch').hide();
    
    } else if( $( document ).width() >= 680 ){
    jQuery('.backstretch').show();  
 
    }
</script>
 

Gracias por tu ayuda

[Alexis88]

Te hubiera dado esa solución ya que era obvia, pero no lo hice porque he aprendido que el tema de estilos es mejor tratarlo únicamente con CSS, pero en fin.

Un saludo