</CSS3 Multiple Background Images>

Use multiple background images on single page

Multiple Background Images

We can use multiple background-images on single element. The different background images are separated by commas.

		
		<style>
			body{
				background-image: url('image.svg'), url('https://www.tdbschool.com/img/tdb-logo.jpg');
			}
		</style>

Multiple background images can be used using either the individual background properties or the background shorthand properties.

		
			<style>
				body{
					background-image: url('image.svg') right bottom no-repeat,
					url('https://www.tdbschool.com/img/tdb-logo.jpg right bottom no-repeat,');
				}
			</style>

	 
<!DOCTYPE html>
<html>
	<head>
		<style>
			div{background-color:black;
			background-size:200px;
			background-image: url('image.svg'), url('https://www.tdbschool.com/img/tdb-logo.jpg');
			background-position: right bottom, left top;
			background-repeat: no-repeat, repeat;
			height:380px;}
		</style>
	</head>
	<!--Body-->
	<body>
		<div></div>
	</body>
</html>

Try it Yourself

</CSS3 Background Attachment>

Learn how to use background-attachment property

Background attachment

Background attachment defines the behaviour of the background image when scrolling the page. This property sets whether a background image is fixed or it is scrolling with the rest of the page.

SYNTAX
{background-attachment: scroll | fixed | inherit | local | initial;}

Default Value
{background-attachment: scroll}


<style>
		div{background-image: url("image.svg");
			background-repeat: no-repeat;
			background-attachment: fixed;
	}
</style>

Property: value

scroll This is the default value. The Background image scrolls with the web page
fixed The background image will not scroll with the page
inherit Inherits this property from its parent element.
initial Sets this property to its default value.
local The background image will scroll with the element's contents

	 
		<!DOCTYPE html>
<html>
	<head>
		<style>
			div{
				background-image: url("image.svg");
				background-repeat: no-repeat;
				background-attachment: fixed;
				height:400px;
				Background-color:black;
		}
		</style>
	</head>
	
	<!--Body-->
	<body>
		<div></div>
	</body>
</html>

Try it Yourself

</CSS3 background-clipping>

Use background clipping property on your web page

Background Clipping

Clip the background

The background-clip property defines how far the background (color or image) should extend within an element.


	<style>
	div{
		border: 10px dotted black;
		padding: 15px;
		background: lightblue;
		background-clip: padding-box;
	  }
	</style>

CSS Syntax
background-clip: border-box | padding-box | content-box | initial | inherit;

border-box: it is the value.
padding-box: The background extends to the inside edge of the border.
content-box: The background extends to the edge of the content box.
initial: it is used to sets the property to its default value.
inherit: this value is used to inherits this property from its parent element.

	 
		<!DOCTYPE html>
<html>
	<head>
		<style>
			div{border: 10px dotted black;
				padding: 15px;
				background: green;
				background-clip: padding-box;
			background-size:200px;
			height:380px;
			border-radius:5px}
		</style>
	</head>
	<!--Body-->
	<body>
		<div></div>
	</body>
</html>

Try it Yourself

</CSS3 Background Blend Mode>

Use background-blend-mode on background image

Background Blending

Lighten background-image blending mode

TYPES

	
		<style>
		body{
			background-image: url("img1.jpg"), url("img2.jpg");
			background-repeat: no-repeat, repeat;
			background-blend-mode: lighten;
		  }
		</style>

Note: Edge/Internet Explorer do not support the background-blend-mode property.

	 
		<!DOCTYPE html>
<html>
	<head>
		<style>
			body{color:rgb(255,255,255);
				background-image: url("https://www.tdbschool.com/img/tdb-logo.jpg"), url("image.svg");
				background-repeat: repeat, repeat;
				background-blend-mode: lighten;
			
			background-size:200px;
			height:380px;
			border-radius:5px}
		</style>
	</head>
	<!--Body-->
	<body>
		<div></div>
	</body>
</html>

Try it Yourself

</CSS3 Background Opacity>

Learn to use background opacity property

Background-Opacity

The CSS background opacity property is used the opacity/transparency of the backgrounds.

TRANSPARENT BACKGROUND-IMAGE
Opacity property value range 0.0 - 1.0. The lower value is more transparent.

		
		<style>
			div{
				background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
				opacity: 0.5;
				}
		</style>

TRANSPARENT CONTAINER
you can also apply opacity property on containers.

		
			<style>
				div{background-color:back;
					opacity: 0.5;
					height:200px;
					}
			</style>

	 
		<!DOCTYPE html>
<html>
	<head>
	<!--internal style-->
		<style>
			div{background-image:url('image.svg');
			background-color:black;
			background-repeat:no-repeat;
			background-size:200px;
			height:380px;
			opacity:0.5;
			}
		</style>
	</head>

	<!--body-->
	<body>
		<div>
		</div>
	</body>
</html>

Try it Yourself

BACKGROUND PROPERTY

</CSS3 BACKGROUND>

What is a background?

</CSS3 Multiple Background Images>

Multiple Background Images

</CSS3 Background Attachment>

Background attachment

</CSS3 background-clipping>

Background Clipping

</CSS3 Background Blend Mode>

Background Blending

</CSS3 Background Opacity>

Background-Opacity