JQuery Fade Background Image but not entire div's text

I have the following CSS and HTML. I have the main div's background as an image, I want to fade the image bu not the entire div. When I run the following code the fade entire div fades but I just want the background image to fade not the text "test"
////CSS
#pagewidth{ 
background:url(images/bg_normal.jpg) right top no-repeat;
width:1024px;
text-align:left;
margin-left:auto;
margin-right:auto;
} 
 
///HTML
<link rel="stylesheet" href="includes/css/css.css" type="text/css" />
<script type="text/JavaScript" src="includes/jquery.js"></script>
</head>
<script type="text/JavaScript">
jQuery(document).ready(function($) {
		$('#pagewidth').fadeTo("fast", 0.4);
});
</script>	
<body>
	<div id="pagewidth">
			<div id="wrapper" class="clearfix" > 
			<div id="maincol" >test</div>
			</div>
	</div>
</body>
</html>

Open in new window

phperAsked:
Who is Participating?
 
alien109Connect With a Mentor Commented:
You can't fade just the background of a div tag. Fading will affect the entire element, and all child elements.
To achieve the effect you want, you'll need to place a div inside of pagewidth which is a sibling of the div with the test "test" and then fade that.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.