CSS Background propertie
CSS Background propertie
1. Properties
The CSS background properties use to define the background effect for element. To shorten code, it also possible to specify all the background properties in one single property. This is called a shorthand property.
Syntax:
background Properties :-
bg-color and bg-image position/bg-size, bg-repeat, bg-origin bg-clip or 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 element.
color-rgb, color-hex, color- name, transparent
4) background- image :-
Sets the background image for the html element. put url(URL)
5) background- position :-
Sets the starting position on the 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 :-
Set background image will be repeat. the repeat-x, repeat-y, no- repeat
2. Background-color Property
The background-color property its sets the background color of an element. The background of an html element the total size of the element, including padding and border Put not the margin). background color and a text color that the makes the text easy to read.
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> 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 used to the use 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 () propertie its use to the 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
Post a Comment