1486 sujets

Web Mobile et responsive web design

Impossibilité de changement de couleur d'arrière-plan en RWD

Hello,
Je commence à avancer en RWD, mais je rencontre un souci. J'ai une div qui dans sa position initiale contient une image en arrière-plan, je souhaite changer le fond avec une couleur unie quand je change de la taille de mon navigateur (media-queries). Je joins le code de test pour lecture Smiley cligne )
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<style type="text/css">
.container {
	display: flex;
	max-width: 1100px;
	margin-right: auto;
	margin-left: auto;
	flex-wrap: nowrap;
	background-color: #F0F;
}
.colonne-article {
	background-color: #0F0;
	width: 69%;
}
.colonne-pub {
	background-color: #FF0;
	text-align: center;
	width: 31%;
}

.bloc-article {
	/*background-size: 100% 100% cover;*/
	/*background-size: 100% 100%;
	/*height: 140px;
	width: 760px;*/
	height: 140px;
	width: 760px;
	font-size: 0.875em;
	font-family: Arial, Helvetica, sans-serif;
	/*font-size: 1.4rem;*/
	overflow: hidden;
	background-image: url(background_article.png);
	background-repeat: no-repeat;
}
body {
	margin: 0px;
	font-size: 100%;
	background-image: url(background.png);
	background-repeat: repeat;
}
.picto-article {
	height: 80px;
	width: 80px;
	margin-top: 30px;
	margin-right: 20px;
	margin-bottom: 30px;
	margin-left: 20px;
}
@media screen and (max-width: 64em) { /* 1024 */
 body {
      font-size: 90%;
   }
.colonne-pub {
	display:none;
	}
.colonne-article {
	max-width: 100%;
	/*max-width:43.91%;*/
	margin-right: auto;
	margin-left: auto;
	}
	.bloc-article {
	/*background-image: url(background_article.png);
	background-repeat: no-repeat;*/
	/*background-size: 100% 100% cover;*/
	/*background-size: 483,63636363636364px 89,09090909090909px contain;*/
	/*background-size: 100% 100%;*/
	/*background-size: 100% auto;*/
	/*height:89.1%;*/
	/*height:auto;*/
	/*max-width: 483.64px;*/
	/*max-width: 100%;*/
	/*min-width:100%;
	min-height:100%;*/
	
	width: 100%;
	height: auto;
	background-color: #F00;
}

	
}

@media screen and (max-width: 50em) { /* 800 */
 body {
       font-size: 75%;
   }
   .colonne-pub {
	display:none;
	}
.colonne-article {
	max-width: 100%;
	/*max-width:43.91%;*/
	margin-right: auto;
	margin-left: auto;
	}
	
		.bloc-article {
	/*background-image: url(background_article.png);
	background-repeat: no-repeat;*/
	/*background-size: 100% 100% cover;*/
	/*background-size: 483,63636363636364px 89,09090909090909px contain;*/
	/*background-size: 100% 100%;*/
	/*background-size: 100% auto;*/
	/*height:89.1%;*/
	/*height:auto;*/
	/*max-width: 483.64px;*/
	/*max-width: 100%;*/
	/*min-width:100%;
	min-height:100%;*/
	
	width: 100%;
	height: auto;
	/*display : block;*/
	/*background-image: url(10x10-#ccc.png);
	background-repeat: repeat;*/
	background-color: #F00;

}

}

@media screen and (max-width: 30em) { /* 480 */
	body {
        font-size: 60%;
		}
	.colonne-pub {
	display:none;
	}
	.colonne-article {
	max-width: 100%;
	/*max-width:43.91%;*/
	margin-right: auto;
	margin-left: auto;
	}
	
	.bloc-article {
	/*background-image: url(background_article.png);
	background-repeat: no-repeat;*/
	/*background-size: 100% 100% cover;*/
	/*background-size: 483,63636363636364px 89,09090909090909px contain;*/
	/*background-size: 100% 100%;*/
	/*background-size: 100% auto;*/
	/*height:89.1%;*/
	/*height:auto;*/
	/*max-width: 483.64px;*/
	/*max-width: 100%;*/
	/*min-width:100%;
	min-height:100%;*/
	
	width: 100%;
	height: auto;
	/*display : block;*/
	/*background-image: url(10x10-#ccc.png);
	background-repeat: repeat;*/
	background-color: #F00;

}

	
}



</style>
</head>

<body>
<div class="container">
  <div class="colonne-pub"><img src="pub-modele.jpg" width="280" height="350"></div><!--colonne-pub-->
  <div class="colonne-article">
    <div class="bloc-article">
      <!--<div class="picto-article"><img src="picto_article.png" width="80" height="80"></div>-->
    Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un imprimeur anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
    </div><!--colonne-article-->
</div><!-- container -->
</body>
</html>
Modérateur
bonjour, background-image et background-color peuvent exister en même temps (la couleur est visible en dehors des limite de l'image ou dans ses zones transparentes).

il font donc annuler l'image:

soit:

@media screen and (max-width: 30em) { /* 480 */
  .truc {
    background-image: none;
    background-color: red;
  }
}

soit en utilisant le raccourci background qui réinitialisera toutes les autres propriétés background- à leur valeur d'origine:

@media screen and (max-width: 30em) { /* 480 */
  .truc {
    background: red;
  }
}
Sujet clos
Aller à