CSS background color
CSS Tutorial » CSS background color
Study in this chapter:
1. - css background color opacity
2. - background-color gradient
3. - background color gradient
4. - background-color transparent
The background-color property in CSS sets the background color of an item.
We can add background-color property to an webpage as:Internal Style - by using a <style> element in the <head> section
External Style - by using an external CSS file as style.css
Inline - by using the style attribute in HTML elements
Syntax:
background-color: value;
};
Inline CSS.
Example:background color
( body of a webpage )
The background color can be specified with a hexadecimal value ( #E9E9E9 ) as you can see on this background, RGB or color name as: red, yellow .....
Browser Support
| Element |  Chrome |
 IE |
 Firefox |
 Opera |
 Safari |
| background-color | Yes | Yes | Yes | Yes | Yes |
CSS Background color
The following example will show how you can change background-color.
<!DOCTYPE html>
<html>
<head>
<style>
.bg {
float: left;
height: 200px;
width: 33%;
background-color: #FF9;
}
.bg2 {
background-color: #6FF;
float: left;
width: 33%;
height: 200px;
}
.text {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
color: #000;
font-size: 16px;
font-weight: bold;
}
.text2 {
text-align: center;
font-family: Georgia, "Times New Roman", Times, serif;
color: #000;
font-size: 16px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="bg"><h4> hello world</h4>
<div class="text"> background</div></div>
<div class="bg2"><h5> hello world</h5>
<div class="text2"> background</div></div></body>
</html>
Related subjects:
Background image size to fit screen
Images size
CSS background image opacity without affecting text
Background color gradient
The "axis" of the gradients can go from top to bottom, left to right, or at any angle you want.
In the following HTML CSS code, we present some examples of what code will look like to shape the design of web pages as you wish: center, animation, code, top to bottom, vertical, transition
Example 1 - top to bottom linear gradient from red to yello:
Example 2 - To make the Linear Gradient do it from left to right, add an extra parameter to the beginning of the linear-gradient() function like "to", indicating the direction, "to the right":
Example 3 - if you need the gradient axis to start from the bottom left corner and go to the top right corner, you have to add "to top right":
<!DOCTYPE html>
<html>
<head>
<style>
.div-top-bottom {
height: 200px;
background-image:
linear-gradient(
red, yellow
);
margin: 12px;
float: left;
width: 27%;
padding: 6px;
font-size: 18px;
font-weight: bold;
}
.div-left-to-right {
height: 200px;
background-image:
linear-gradient(
to right,
red, yellow
);
margin: 12px;
float: left;
width: 27%;
padding: 6px;
font-size: 18px;
font-weight: bold;
}
.div-to-top-right {
height: 200px;
background-image:
linear-gradient(
to top right,
#F00, #FF0
);
margin: 12px;
float: left;
width: 27%;
padding: 6px;
font-size: 18px;
font-weight: bold;
}</style>
<body>
<div class="div-top-bottom">
<h3>top to bottom linear gradient</h3>
Example 1
</div>
<div class="div-left-to-right">
<h4>to the right</h4>
Example 2
</div>
<div class="div-to-top-right">
<h5>to top right</h5>
Example 3
</div>
</body>
</html>
Tags: gradient center, animation, code, top to bottom, vertical, transition
Background color opacity
CSS background opacity without affecting child elements - text
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(0, 0, 255);
padding: 10px;
}
div.fi {
background: rgba(0, 0, 255, 0.2);
}
div.se {
background: rgba(0, 0, 255, 0.3);
}
div.th {
background: rgba(0, 0, 255, 0.5);
}
</style>
</head>
<body><div class="fi"><p>20% opacity</p></div>
<div class="se"><p>30% opacity</p></div>
<div class="th">
<p>50% opacity</p></div>
<div><p>default</p></div></body>
</html>
The value of a color in the RGBA code is specified with: rgba (red, green, blue, beta). The beta parameter is a number between 0.0 (it is completely transparent) and 1.0 (it is completely opaque).
Summary of description
background color transparent, not working, percentage, percent 50, blur, hex, online, transition on scroll, on hover bottom to top, on hover left to right, on hover, not working, animation
CSS background color - opacity, gradient, transparent - css tutorial
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.