The Developer Brains


BACKGROUND PROPERTY

Web Designing | Web Development


SEE MORE














</CSS3 BACKGROUND>




What is a background?

We can set colors, gradients, and many images as the background on a web page. We can change properties of background as per our choice. Here we will learn to use different background properties i.e. Background-image, Background-gradients, Background-size etc.


SEE MORE


























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

CSS Syntax
background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | saturation | color | luminosity;

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





















Which background property is used to repeat an image file in x-direction?
1. {background-repeat:x-repeat;}
2. {background-repeat:repeat-x;}
3. {background:repeat-x;}
4. {background:x-repeat;}



Check Now



CSS3 QUIZ







Next: CSS3 Position Property


Previous

      

Next Page













  Share TDB SCHOOL  

Share this E-Learning Website on social media platforms with your friends and followers