CSS Tutorial - CSS Backgrounds
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.
Table of Contents
- CSS Background Color
- CSS Background Image
- CSS Background Repeat
- CSS Background Attachment
- CSS Background Shorthand
CSS Background Color
If you want to change the background color, you can use the CSS background-color property. The color is specified by:
- a color name, like -
red - a HEX value, like -
#ffffff - and RGB value, like -
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:
Background Color for Other Elements
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:
Opacity / Transparency
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:
Using RGBA
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:
CSS Background Image
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.
CSS Background Repeat
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:
Background Image No Repeat
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:
Background Position
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:
CSS Background Attachment
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.
CSS Background Shorthand
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-colorbackground-imagebackground-repeatbackground-attachmentbackground-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.