[CSS] Jak stworzyć wiele obrazków tła dla jednego elementu?

<div id="head">
   <h1>Tytuł strony</h1>
   <h2>Podtytuł strony</h2>
</div>
<div id="tresc">
   <h3>Tytuł informacji</h3>
   <p>Duis condimentum faucibus volutpat, erat blandit lectus. In fermentum. Aliquam eleifend, ligula. Aliquam malesuada tristique velit, a dolor sit amet, nibh. Ut sed nulla eu pede convallis justo. Integer gravida tellus enim, ac nunc. Phasellus a wisi. Phasellus a elit. Mauris vitae mi. Morbi felis vitae wisi dui eu pulvinar nec, lacinia sit amet, est. Duis nonummy laoreet, ante sit amet sapien auctor vitae, consequat id, libero. Morbi facilisis luctus mauris sed ante. Vivamus imperdiet quis, velit. Mauris leo. Ut sagittis eleifend. Nulla sed aliquet commodo magna, at ante. Pellentesque bibendum, sem at tellus. Morbi eleifend. Nulla quis mauris nibh orci quis metus. Vestibulum ante a leo. Sed euismod nulla orci nec libero. Duis at quam. Aliquam ut wisi. Curabitur condimentum et, commodo odio nec egestas ac, eros. Mauris id sapien sapien, ornare vitae, imperdiet sagittis, ipsum primis in ultricies pretium. Praesent a augue eu sem tincidunt quis, lorem. Vivamus vulputate tempor auctor, tempor id, nunc. Maecenas tortor ante sit amet, consectetuer viverra semper convallis. Fusce nulla. Phasellus ipsum primis in consequat lacus quis nulla ac enim sed lorem leo, ac posuere cubilia Curae, Quisque et ligula. Duis elementum dui. Suspendisse sed libero. Aliquam quis ante. Ut turpis. Duis dictum.</p>
   <p>Nunc vulputate. Donec adipiscing elit. Aliquam erat volutpat. Curabitur at neque. Integer non sem. Nam quis nibh rutrum posuere elementum dui. Aenean ac libero. Cras rhoncus vel, orci. Sed nibh pulvinar vitae, fringilla orci. Integer adipiscing. Nam feugiat congue, aliquet enim quis enim. Phasellus a ornare facilisis dignissim dapibus non, tempor ac, tempus euismod. Integer lacinia porta. Ut molestie placerat, egestas a, posuere risus. Morbi id nibh. Morbi mattis. Aliquam ut erat. In bibendum a, mauris. Nunc gravida. In lacus lacus nec dui. Morbi vitae ante. Suspendisse molestie. Phasellus vitae est turpis viverra sit amet enim. Sed sit amet dolor. Maecenas tincidunt. Aliquam bibendum, neque tristique in, commodo est massa mattis faucibus. Sed sed interdum ipsum sit amet, tellus. Ut sodales, augue eget imperdiet lectus bibendum ac, ultricies eu, facilisis hendrerit. Fusce quam placerat velit pede sit amet eros. In id lectus. Phasellus ornare sollicitudin. Cras ac diam. Nulla a wisi. Morbi vel nulla.</p>
</div>
<div id="foot">
   <p>Jakiś tekst na stopce.</p>
</div>

html, body, h1, h2, h3, p, a {
	margin: 0;
	padding: 0;
}
body {
	font-family: Arial, Helvetica, sans-serif;
}
h1 {
	color: #0066CC;
	font-size: 32px;
	margin: 0 0 10px 30px;
	text-shadow: 1px 2px 2px #000;
}
h2 {
	font-size: 24px;
	margin: 0 0 10px 30px;
	text-shadow: 1px 1px 2px #000;
}
h3 {
	font-size: 20px;
	text-shadow: 1px 2px 2px #000;
}
p {
	font-size: 14px;
	margin-bottom: 10px;
	line-height: 150%;
}
#head {
	height: 125px;
	width: 100%;
	padding-top: 30px;
	background: url(img/header.jpg) repeat-x 0 top;
}
#tresc {
	width: 600px;
	margin: 0 170px;
	padding: 20px 30px 40px;
	background-color: #f8ffa9;
	border: solid 3px #000;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: 0 5px 50px #000;
	-moz-box-shadow: 0 5px 50px #000;
	box-shadow: 0 5px 50px #000;
}
 
#foot {
	height: 117px;
}
 
#foot p a {
	color: #b30;
	font-size: 20px;
	line-height: 110px;
	margin-left: 30px;
	text-shadow: 2px 2px 2px #000;
}
#foot p a:hover {
	color: #990;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	background: url(img/dots.jpg) no-repeat; /*definicja tła dla przeglądarek typu IE7/IE8*/
	background: url(img/logo1.jpg) no-repeat 50px 300px,
				url(img/logo2.jpg) no-repeat 850px 550px,
				url(img/footer.jpg) repeat-x 0 bottom,
				url(img/dots.jpg) no-repeat center 0;/*wielorotne tło*/
}