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

CSS3 Background property is used to add a background on web pages.

Background Property

Set different background properties in one declaration:


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


SYNTAX




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

<!--body-->
<body>
</body>




Try it Yourself












</CSS3 Background-image>

Here we will use some background Properties for adjusting image file on background.

Background-Image Property

background-image property is used to specify a background image to be applied to all matched elements.

				
					<style>
div{background-image:url('image.svg')}
</style>


Other Properties
  • background-color is used to apply background color.
  • background-repeat is used to repeat background image
  • background-position is used to set background image's position
  • background-size is used for background image's size
  • background-origin defines how the background is positioned (ignored when background-attachment is fixed)
  • background-clip defines how the background is painted relative to the content-box, border-box, or the padding-box
  • background-attachment defines how the background image behaves, whether it scrolls along with its containing block or has a fixed position within the viewport
  • initial Sets the property to value to default
  • inherit Inherits property value from parent element



<!DOCTYPE html>
<html>
	<head>
	<!--internal style sheet-->
		<style>
			div{color:rgb(255,255,255);
			background-image:url('image.svg');
			background-color:black;
			height:400px;
			border-radius:5px}
		</style>
	</head>

	<!--Body-->
	<body>
		<div>

		</div>
	</body>
</html>



Try it Yourself











</CSS3 Background-repeat>

Apply background-repeat property to allow or disallow the repeating of an image

Background-repeat Property

When we use background-image property then background repeats on both x-direction and the y-direction. The solution is CSS background-repeat property to stop repeating the background. By using this property we can remove background repeating on both direction.


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


SYNTAX
  • inherit | initial | no-repeat | repeat | repeat-x | repeat-y | round | space | unset

  • {background-repeat: repeat-x} allows image to repeat on x-direction.

<style>body{background-repeat:repeat-x;}</style>


  • {background-repeat: repeat-y} allows images to repeat in y-direction.

<style>body{background-repeat:repeat-y;}</style>

  • default value: {background-repeat: repeat}.
  • {background-repeat: no-repeat} is used to stop repeating the background.


<!DOCTYPE html>
<html>
	<head>
	<!--style sheet-->
		<style>
			div{
				color:rgb(255,255,255);
			background-image:url('image.svg');
			background-color:black;
			background-repeat:no-repeat;
			background-size:200px;
			height:380px;
			border-radius:5px
		}
		</style>
	</head>

	<!--Body-->
	<body>
		<div>

		</div>
	</body>
</html>



Try it Yourself








</CSS3 Background-Position>

Try to set the position of background images

Background-Position Property

background-position property is used to set the position of the background-images.

				
					<style>
div{
	background-image:url('image.svg');
	background-position:top right;
	}
</style>


SYNTAX
  • background-position: bottom | center | top | right | left | unset | initial | inherit

EXPLANATION
  • We are applying background-position property on a image.svg file.
  • {background-position: top right} property sets the background image to the top right corner.
  • click on try it yourself button and try to run the code.



<!DOCTYPE html>
<html>
	<head>
		<style>
			div{color:rgb(255,255,255);
			background-image:url('image.svg');
			background-position:top right;
			background-color:black;
			background-repeat:no-repeat;
			background-size:100px;
			height:380px;
			border-radius:5px}
		</style>
	</head>

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



Try it Yourself







</CSS3 Background Gradients>

Create background with multiple colors


Gradient

Gradient are added in CSS3. As an image, gradients are set with the background-image property, or the background shorthand method.

TYPES
  • linear-gradient()
  • radial-gradient()
#linear-gradient() Syntax

background: linear-gradient (direction, color-1, color-2, ...);

#radial-gradient() Syntax

background: radial-gradient(red, blue);

MULTIPLE GRADIENTS
You can saparate multiple linear-gradient properties with a comma.

		
		<style>
		body {
			background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
            linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
            linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
		}
		</style>
		
		


 
	<!DOCTYPE html>
<html>
	<head>
		<style>
		/*linear gradient*/
		.class1{background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%);height:100px}

		/*radial gradient*/
		.class2{background: radial-gradient(white, gray, black);height:100px}
		
		/*multiple linear gradients*/
		.class3{background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
				linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
				linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
				height:300px;}
		</style>
	</head>
<body>
<div class="class1"></div><br>
<div class="class2"></div><br>
<div class="class3"></div>
</body>
</html>



Try it Yourself







</CSS3 Background Size>

Adjust background image on your Web Page


Background-Size

You can specify the size of a background-image in px, % and auto.

VALUES
  • auto | contain | cover | initial | inherit | unset
# when we set the width of the image the height becomes "auto"
		
		<style>
			.class1{background-size:200px;}
		</style>
		
		

# we can also set both width and height value.

<style>
	.class2{background-size:200px 300px;}
</style>


# Default value: auto

<style>
	.class3{background-size:auto;}
</style>



	 
		<!DOCTYPE html>
<html>
	<head>
		<style>
			div{color:rgb(255,255,255);
			background-image:url('image.svg');
			background-color:black;
			background-repeat:no-repeat;
			height:380px;
			border-radius:5px}
			.class1{background-size:200px;}
			.class2{background-size:auto;}
		</style>
	</head>
	<!--Body-->
	<body>
		<div class="class1"></div>
		<div class="class2"></div>
	</body>
</html>
	
	
	

Try it Yourself







</CSS3 Background Shorthand>

background shorthand technique


Background Shorthand

We can use multiple background properties in one declaration

SYNTAX

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


  • background-color is used to apply background color.
  • bg-image: image file.
  • background-repeat is used to repeat background image
  • background-position is used to set background image's position
  • background-size is used for background image's size
  • background-origin defines how the background is positioned (ignored when background-attachment is fixed)
  • background-clip defines how the background is painted relative to the content-box, border-box, or the padding-box
  • background-attachment defines how the background image behaves, whether it scrolls along with its containing block or has a fixed position within the viewport
  • initial Sets the property to value to default
  • inherit Inherits property value from parent element



	 
		<!DOCTYPE html>
<html>
	<head>
		<style>
			div{
				color:rgb(255,255,255);
			background:black 
			url('image.svg') 
			center 
			no-repeat 
			fixed;
			height:400px;
			border-radius:5px
		}
		</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 other background properties


Previous

      

Next Page













  Share TDB SCHOOL  

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