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

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial | inherit;
Next: CSS3 Background-image Property



<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

BACKGROUND PROPERTY

</CSS3 BACKGROUND>

What is a background?

</CSS3 Background>

Background Property

</CSS3 Background-image>

Background-Image Property

</CSS3 Background-repeat>

Background-repeat Property

</CSS3 Background-Position>

Background-Position Property

</CSS3 Background Gradients>

Gradient

</CSS3 Background Size>

Background-Size

</CSS3 Background Shorthand>

Background Shorthand