28172 sujets

CSS et mise en forme, CSS3

Background-color facultatif

Bonjour,

Je voudrais afficher les fonds colorés de deux balises filles distinctes lorsque l'image de la balise mère ne s'affiche pas pour x raisons. Est-ce possible ?

Je veux en effet prévoir le cas où l'image ne s'afficherait pas.

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="utf-8" />
	<meta http-equiv="content-type" content="text/html" />
	<title>Image absente</title>
	<style>
	.mere
	{
	background-color: #ecaf79;
	background-image:url('monimage.jpg');
	}
	.fille1{}
	.fille2{}
	</style>
</head>
<body>
	<div class="mere">
		<div class="fille1">Un fond</div>
		<div class="fille2">Et un autre</div>
	</div>
</body>
</html>


Merci pour vos explications.
Je pense, sans toute fois en etre totalement sur, qu'il est possible de faire ca avec javascript.

En CSS pur, je ne vois pas.
hello,

C'est faisable en javascript, mais pour simplifier, il faudrait savoir sous quelles conditions ton background ne s'affiche pas.
Autrement, tu vas devoir vérifier que background-image:url('monimage.jpg'); existe bien, en js.
saajuck a écrit :
il faudrait savoir sous quelles conditions ton background ne s'affiche pas.

J'ai en fait testé ce que donnait mon CSS lorsque les images n'étaient pas visibles. On distingue moins bien la zone du menu à gauche, et la zone du corps du texte à droite.

Sans image, la zone de gauche (div menu) nécessite une couleur de fond, ainsi que la zone de texte (div corps). Ce background-color ne doit cependant plus apparaitre lorsque les images sont accessibles, car ces deux zones sont elles-mêmes posées sur un arrière-fond (un div général), et ces aplats de couleurs seraient alors du plus mauvais effet. Je n'ai aucune idée sur la façon de procéder pour corriger cela.

Exemple :
http://img4.hostingpics.net/pics/940950background.png
Modifié par Pyanepsion (12 Jun 2012 - 08:38)
Smiley biggrin Merci Saajuck pour ta réponse.

L'utilisateur peut avoir paramétré son navigateur pour empêcher l'affichage des images pour gagner en bande passante. J'y vois d'une part ceux qui utilisent un téléphone avec accès Internet sans abonnement, et d'autre part ceux qui sont situés dans une zone géographique mal desservie. Ces deux types de clientèles représentent une part non négligeable de ma clientèle potentielle.
ok !
Alors tu devrais peut-être faire l'inverse :

Mettre un background color à ta div mère, et des background-images aux filles.
Si les images des filles sont chargées, elles cacheront le background color de la mère. Si ce n'est pas le cas, alors on ne verra que le bg de la mère.

Je pense que ce serai la solution la plus simple.

Sinon, à destination des mobiles, tu peux utiliser des media query, mais ça ne prendra pas en compte les PC avec du 56 k !
Sujet clos
Aller à