[Résolu] Image de fond non visible sur mobile

Bonjour,

Je suis nouveau et je suis bloqué sur un petit problème de baground-image.
Voila, je realise un site adaptable pour tablette et smartphone et en bas de page j'ai une balise <footer> qui est gérée par un fichier css dans lequel j'ai positionné une image de fond. Le problème c'est que sur mobile je souhaiterais qu'elle ne soit pas présente. j'ai essayé de modifier le fichier responsive.css dans la partie @media (max-width : 480px) mais rien ne change.

voici un petit morceau de mes page index.htm, style.css et responsive.css

index :

<footer>
	  <div class="container">
	     <div class="row">
	         <div class="span12">
                 <p3><br>Menu ouvrier - Plat du jour - Vente à emporter</p3><br><br>
               <p4>O P'tit Brettois &copy; 2015 &nbsp;&nbsp;&nbsp;&nbsp;<a href="index-6.html">Conditions d'utilisation</a></p4><br><br><p5>Renseignements & Réservations<br>02 43 75 48 73 / 06 20 77 16 14</p5>
                 <div class="soc-icons"><a href="https://www.facebook.com/pages/OPtit-Brettois/219307538228046" id="icon-1" target="_blank"></a></div>
	         </div>
	         <a href="#" onClick="goToByScroll('top'); return false;" class="top"></a>	  
	     </div>
	  </div>
  </footer>

style.css :

footer {
	color: #ffffff;
	border-top: 1px solid #d8d8d8;
	position: relative;
	text-align: center;
	font-size: 14px;
	line-height: 22px;
	color: #948b87;
	background-color: #3a0013;
	background-image: url(../img/marmitte.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
}

responsive.css :

@media (max-width: 480px) {
  .nav-collapse {
    -webkit-transform: translate3d(0, 0, 0);
  }
  .page-header h1 small {
    display: block;
    line-height: 22px;
  }
  input[type="checkbox"],
  input[type="radio"] {
    border: 1px solid #ccc;
  }
  .form-horizontal .control-label {
    float: none;
    width: auto;
    padding-top: 0;
    text-align: left;
  }
  .form-horizontal .controls {
    margin-left: 0;
  }
  .form-horizontal .control-list {
    padding-top: 0;
  }
  .form-horizontal .form-actions {
    padding-left: 10px;
    padding-right: 10px;
  }
  .media .pull-left,
  .media .pull-right {
    float: none;
    display: block;
    margin-bottom: 10px;
  }
  .media-object {
    margin-right: 0;
    margin-left: 0;
  }
  .modal {
    top: 10px;
    left: 10px;
    right: 10px;
  }
  .modal-header .close {
    padding: 10px;
    margin: -10px;
  }
  .carousel-caption {
    position: static;
  }
}

Si vous avez des solutions pour faire disparaitre l'image marmitte.png sur les mobile cela serait vraiment sympa.

merci à vous

lakawet

Merci pour ta réponse

Ah oui désolé, j'ai fait tellement d'essai que j'ai copié le code d'origine.
Je viens d'essayer le code mais cela ne change rien.

Je continu mes recherches.

lakawet

Bonjour,

C'est bon j'ai trouvé.
Bizarrement, j'ai le même type de code queries dans mon fichier style.css à la fin et donc j'ai placé ton code J_B et nickel

Merci

lakawet