Posted by Ridwan Fadilah on Aug 21, 2020 - 07:02 pm
Learn about CSS Background properties and the examples of how to add a background color or image to a web page by using CSS3.
Today's, adding or set a background for a website is nothing new.
Each background use and chosen is also part of the web design. Many websites have used and added a background to each page in order not to look get boring.
The background can be an image or just a color.
If you want to change the background color, you can use the CSS background-color
property. The color is specified by:
red
#ffffff
rgb(255,0,0)
Example:
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
- CSS
body {
background-color: lightgrey;
}
The example above will display by the browser like this:
The background changed is not specific to the body element only. You can also set the background color for any HTML elements.
Example:
body {
background-color: lightgrey;
}
h1 {
background-color: aliceblue;
}
p {
background-color: blueviolet;
}
The example above will display by the browser like this:
The CSS opacity
property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent:
div {
background-color: blue;
}
div.first {
opacity: 0.1;
}
div.second {
opacity: 0.3;
}
div.third {
opacity: 0.6;
}
The example above will display by the browser like this:
If you do not want to apply opacity to child elements, like in our example above, use RGBA color values.
The base of the RGBA is RGB. RGBA stands for Red Green Blue and Alpha.
When using the RGB values, you have the additional option to set specifies the level of opacity with the alpha channel. That will control the transparency level of the background.
If alpha is used, the format code is "rgba
". The value of alpha is 0 and 1, 0 for full transparency and 1 for opaque.
Example:
div {
background: rgb(0, 0, 255);
}
div.first {
background: rgba(0, 0, 255, 0.1);
}
div.second {
background: rgba(0, 0, 255, 0.3);
}
div.third {
background: rgba(0, 0, 255, 0.6);
}
The example above will display by the browser like this:
The background use is not only using a color. The background can also use an image. You can use the CSS background-image
property to specifies an image to use as the background of an element.
Example:
body {
background-image: url("iniblog-fb.png");
}
The example above will display by the browser like this:
Important to note: By default, the image is repeated so, that will cover the entire HTML element.
By default, the background-image
property repeats an image both horizontally and vertically.
Example:
body {
background-image: url("gradient.jpg");
}
Some images should be repeated only horizontally or vertically, or they will look strange, like this:
It will look better if the image above is repeated only horizontally. You can use the background-repeat: repeat-x
to repeat an image vertically:
body {
background-image: url("gradient.jpg");
background-repeat: repeat-x;
}
The example above will display by the browser like this:
If you don't want to repeat the background image, you can use the CSS background-repeat
property with no-repeat
value.
Example:
body {
background-image: url("iniblog.png");
background-repeat: no-repeat;
}
The example above will display by the browser like this:
Use the CSS background-position property with a margin added (optional) to specify the position of the background image to make it does not disturb the text too much.
Example:
body {
background-image: url("iniblog.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 500px;
}
The example above will display by the browser like this:
The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):
body {
background-image: url("iniblog.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
margin-right: 500px;
}
The example above will display by the browser like this:
See the Pen CSS Background Attachment Example by Ridwan (@ridwan-the-bold) on CodePen.
Try to scroll the result above and set the frame size to 0.5 for the better view.
Specify that the background image should scroll with the rest of the page:
See the Pen CSS Scroll Background Attachment Example by Ridwan (@ridwan-the-bold) on CodePen.
Try to scroll the result above and set the frame size to 0.5 for the better view.
To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.
You can use the shorthand property background:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
When using the shorthand property the order of the property values is:
background-color
background-image
background-repeat
background-attachment
background-position
It does not matter if one of the property values is missing, as long as the other ones are in this order. Note that we do not use the background-attachment property in the examples above, as it does not have a value.
Okay, that's the CSS Backgrounds tutorial. You will learn more about the CSS basics in the next chapter.
You can read another CSS basics tutorial in the related article below. You can also find another tutorial on our YouTube Channel.
Thanks for reading.