CSS Background propertie
1. Properties
The CSS background properties are used to define the background effects for elements. To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.
Syntax:
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial | inherit;
1) Background :- Sets all the background properties in one declaration.
background-color, background- image, background-repeat, background-attachment, background-position
2) background- attachment :- Sets whether a background image is fixed or scrolls with the rest of the page.
scroll, fixed
3) background- color :- The background-color property specifies the background color of an element.
color-rgb, color-hex, color- name, transparent
4) background- image :- Sets the background image for an element.
url(URL)
5) background- position :- Sets the starting position of a background image.
top left, top center, top right, center left, center center, center bottom left, bottom center, bottom right, x% y%, xpos ypos
6) background- repeat :- Sets how a background image will be repeated.
repeat, repeat-x, repeat-y, no- repeat
2. Background-color Property
The background-color property sets the background color of an lement. The background of an element is the total size of the element, including padding and border Put not the margin). Use a background color and a text color that makes the text easy to read.
CSS Syntax:
background-color: color / transparent | initial | inherit;
Property Values:
Color
Specifies the background color.
Transparent
This is the default value.Specifies that the background color should be transparent.
Initial
Sets this property it's default value
Inherit
Inherits this property from its parent element.
1. Background color
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: rgb(180, 60, 50);}
h2 {
background-color:rgba(8, 150, 150, 10); }
div { background-color:hsl (70, 45%, 45% ); } span{ background-color: yellow; }
</style> </head>
<body>
<h2>Welcome Pune Publication</h2> <div>Setting background color to "div"</div> <p>Setting <span> background color</span> to *p*</p>
</ul>
</body>
</html>
Background color
output
2. Background color and image
Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>
</body>
</html>
Background color and image
output
3. Linear gradient
Using linear - gradient two colors as a background image for a <div> element. Internet
Linear gradient
Example
<!DOCTYPE html>
<html><head> <style>
#bg1 {
height: 100px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow); }
#bg2 {
height: 100px;
background-color: #cccccc;
background-image: linear-gradient(blue, red, green);
}
</style></head><body>
<h2>Linear Gradient</h2>
<p>This linear gradient starts at the top. <br>It starts red, transitioning to yellow:</p>
<div id="bg1"></div>
<p>It starts blue, transitioning to red and red transforming to green:</p>
<div id="bg2"></div>
</body>
</html>
Linear gradient
output
4. Linear Gradient as Background Image
Example
<!DOCTYPE html>
<html>
<head>
<Style>
#bg1 {
height: 100px;
background-color: #cccccc;
background-image: repeating-linear-gradient(blue, green 10%, green 20%);
</style>
</head>
<body>
<h2>Linear Gradient as Background Image</h2>
<p>The repeating-linear-gradient() function is used to repeat linear gradients:</p>
<div id="bg1"></div>
</body>
</html>
Linear Gradient as Background Image
5. Radial gradient
Radial gradient
Example
<!DOCTYPE html>
<html>
<head>
<style>
#bg2 {
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow);
</style>
</head>
<body>
<div id="bg2"></div>
<h2>Radial gradient</h2>
</body>
</html>
Radial gradient
output
6. Repeating- linear- gradient
Repeating linear gradient() function
is used to repeat radial gradient.
Repeating- linear- gradient
Example
<!DOCTYPE html>
<html>
<head>
<style>
#bg2 {
height: 200px;
background-color: #cccccc;
background-image: repeating-linear-gradient(yellow, red 10%, white 20%);
</style>
</head>
<body>
<h2> repeating linear gradient</2>
<div id="bg2"></div>
</body>
</html>
Repeating- linear- gradient
output
