Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Multiple Background Images Tutorial

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>
thumb

CSS Videos

Background and Overlay Effects

Multiple Background Images TutorialTheater Mode Overlay Tutorial Javascript Light Switch Toggle DarkFixed Header and Footer Div Layout TutorialLinear Gradient Background TutorialRadial Gradient Background TutorialVideo Background Tutorial Plus Youtube Embed