in

Multiple Backgrounds with CSS

Multiple Backgrounds with CSS

Multiple Backgrounds with CSS! I agree with David Walsh that there are certain features that we should have had several years ago. One of those features is the HTML5 placeholder; we used JavaScript shims for a decade before placeholder came along.

Another one of those simple features is multiple background images with CSS. Instead we’d need to nest another element for every additional background image. Now we have a syntax for supporting multiple background images on one element, and here’s what it looks like.

Multiple Backgrounds with CSS

View demo

Advertisement

The CSS

Multiple backgrounds involved using multiple property assignments with multiple values, separated by a comma:

#multipleBGs {
	background: url(photo1.png),
		    url(photo2.png),
		    url(photo3.png)
	;
	background-repeat: no-repeat,
	                   no-repeat,
			   repeat-y;

	background-position: 0 0, 30px 70px, right top;
        width: 400px; height: 400px; border: 1px solid #ccc;}

Trying to stuff all properties via shorthand within the background property wont work, unfortunately; multiple property declarations must be used. All of the background properties may be used (background-attachment , background-clip , background-image , background-origin , background-position , background-repeat , background-size), as well as CSS gradients.

View demo

Another awesome CSS feature that we can finally used. Using multiple CSS backgrounds is an incredible useful tool, preventing the need for nested elements for the sole purpose of formatting.

Advertisement

Written by Jonny

Hi! I am the author and publisher of this site. Please feel free to comment the articles and don´t forget to share the articles!

Leave a Reply

Your email address will not be published. Required fields are marked *