fade sur une image de fond en css

Bonjour, j'aimerais appliquer un effet fade sur une image de fond en css.
Code:

1 2 3 4 5 6 7 8 9 10 11 JQUERY : $(document).ready(function() { $("#overall").fadeTo(0, 0); }); $(window).load(function() { $("#overall").fadeTo(1500, 1); }); CSS: #overall {background:url(images/bg1.jpg) no-repeat center 320px;}
le problème avec ça, c'est que ca me fade toute ma div#overall, comment juste sélectionner l'image de fond qui est déclarrée dans les css ?

d'avance, merci pour votre aide et bonne journée à tous

On ne peut pas faire un fade sur une image de background.

Bonsoir

Avec les navigateurs récents (IE9 et mieux), on peut jouer avec rgba().

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgba(210, 214, 98, 0.5); color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		a {-webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:300px; margin:12px auto; background-color:#ffffff; color:#000000; border:1px solid #666666; }
		footer {margin-left:36px; }
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-09-06T01:35:00.000+02:00" pubdate>2011-09-06</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
	<script>
		$(function(){
			var obj1 = $("body"),
				obj2 = $(".conteneur"),
				i = 1, // alpha 100%
				objInterval = setInterval(function(){
					if (i > 0.04){ // alpha 4%
						obj1.css('background-color', 'rgba(0, 0, 255, ' + i + ')');
						obj2.css('background-color', 'rgba(255, 0, 0, ' + i + ')');
						i -= 0.02; // -2%
					} else {
						clearInterval(objInterval);
					}
				}, 33); // 0.033s
		});
	</script>
</body>  
</html>

Oui, mais ça ne fonctionne qu'avec les couleurs et pas les images comme demandé...
Il y a toujours la possibilité de mettre une image (<img>) sous une <div> grâce à des positionnements relatifs et absolus, puis effectuer un fade sur l'image. Mais c'est bancal et ce n'est pas fait pour.

Quoi qu'il en soit, beaucoup de personnes ont voulu cette fonctionnalité et tous ceux que je connais qui ont réussi, ont compris que le résultat est moche et n'apporte pas grand chose.