Videos ➤ CSS ➤ Background and Overlay Effects ➤ Multiple Background Images Tutorial

Multiple Background Images Tutorial

Name: Multiple Background Images Tutorial
Uploaded: 2014-11-17T02:50:52+00:00
Description: Watch Multiple Background Images Tutorial video in the Background and Overlay Effects subsection of the CSS section. Learn CSS with Adam Khoury.

Published : November 17, 2014
Last Edited : November 24, 2025
Author : Adam Khoury

Learn to use CSS to apply multiple background images to most any HTML elements. This could also be used as a clean method of pre-loading images for Javascript or image galleries, so that images are ready for viewing right away.

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
  width: 600px;
  height: 400px;
  background-image: url(adam.png), url(powerbird.png), url(backdrop.jpg);
  background-position: center, center top, left top;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
</style>
</head>
<body>
<h2>CSS3 Multiple Background Images</h2>
<div id="myDiv"></div>
</body>
</html>