CSS Tutorial - CSS Backgrounds

Posted by Ridwan Fadilah on Aug 21, 2020 - 07:02 pm

CSS Backgrounds

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

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:

CSS Background Color Example
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:

CSS Background Color for any HTML Element Example
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:

CSS Background Opacity Example
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 Opacity Using RGBA Example

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:

CSS Background Image Example
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:

CSS Background Repeat Example

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:

CSS Background Repeat Vertically Example
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:

CSS Background No Repeat Example
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 Position Example

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-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.


Related Articles