Embedded Files
CSS backgrounds
CSS backgrounds
The CSS background properties are used to add background effects for elements.
In these chapters, you will learn about the following CSS background properties:
background-color
background-image
background-repeat
CSS background-color
CSS background-color
In CSS, the background-color property is used to specify the color of an element's background. The backdrop encompasses the entire size of the element, including padding and border but excludes margin. It makes the content more easier for the user to read. Background-color attribute of element
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Basic Background Color</h1>
</body>
</html>
CSS
body {
background-color: blue;
}
body {
background-color: red;
}
body {
background-color: yellow;
}
Other Elements
Other Elements
You can set the background color for any HTML elements:
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html>
CSS
h1 {
background-color: green;
}
div {
background-color: orange;
}
p {
background-color: purple;
}
Opacity / Transparency
Opacity / Transparency
The opacity attribute determines an element's opacity/transparency. It can have a value between 0.0 and 1.0. The lower the value, the clearer:
Example
HTML
<!DOCTYPE html>
<html>
<body>
<h1>Transparent Boxes</h1>
<p>When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read:</p>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.2</h1>
</div>
<div class="third">
<h1>opacity 0.3</h1>
</div>
<div class="fourth">
<h1>opacity 0.4</h1>
</div>
<div class="fifth">
<h1>opacity 0.5</h1>
</div>
<div class="sixth">
<h1>opacity 0.6</h1>
</div>
<div class="seventh">
<h1>opacity 0.7</h1>
</div>
<div class="eighth">
<h1>opacity 0.8</h1>
</div>
<div class="ninth">
<h1>opacity 0.9</h1>
</div>
<div>
<h1>opacity 1 (default)</h1>
</div>
</body>
</html>
CSS
body {
background-color: green;
}
div {
background-color: lightblue;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.2;
}
div.third {
opacity: 0.3;
}
div.fourth {
opacity: 0.4;
}
div.fifth {
opacity: 0.5;
}
div.sixth {
opacity: 0.6;
}
div.seventh {
opacity: 0.7;
}
div.eighth {
opacity: 0.8;
}
div.ninth {
opacity: 0.9;
}
Page updated
Google Sites
Report abuse