Set a beautiful background color using CSS!

When creating a web page, how to set the background color is an important factor in determining the image of the page.
In this article, we will explain how to set the background color in CSS and techniques such as transparency.

Basic background color setting method

Specify the “background-color” property to set the background color.

background-color: （）;

If you want it to be reflected on the entire page, you can set it by setting it to the “body” element.

body {
  background-color: silver;
}

The sample sets the background of the page to silver.

Color specification method

There are several ways to specify colors in CSS. Here are some of them.

color name

It is a method of expressing by specifying the English color name.
16 basic colors are set. Details will be described later.

color code

The color code is written using the three primary colors of red, green, and blue.
Since each can be represented in 255 steps from 0 to FF, 16.77 million colors can be represented by 255 to the power of 3.

The sample below shows a red color.

background-color: #FF0000;

The color code is described according to the following rules.

Each color is represented by a hexadecimal number from 00 to FF.
The closer to FF, the brighter the color, with #000000 being black and #FFFFFF being white.

Correspondence table of color names and color codes

Color names and color codes are represented in the following correspondence table.

Many of the colors registered as color names are vivid colors, and most of them are colors that are not often used on websites as of 2022.
When you actually specify the background color of a website, you don’t often specify it by color name, so if you remember the two patterns of white and black, you should be fine.

RBGA designation

When specifying the background color with CSS, you may want to specify it including transparency.
In such a case, you can specify the transparency at the same time as the color by using the “rgba” property.

Let’s check the sample.

CSS

p {
  background-color: rgba(255, 0, 0, 0.7);
}

HTML

<p>

</p>

The rgba property sets the value as follows.

The transparency is specified between 0 and 1.0, and the closer to 0, the more transparent it becomes.
If you change the parameter of the previous sample from "0.7" to "0.2", I think it will be easier to imagine the transparency.

Also note that RGB colors are expressed in decimal not hexadecimal.

Sample of specifying background color using CSS

For the background color, you can create a beautiful design by specifying the color of the blocks or overlapping them.
Here is a sample that adds a title to a photo with a transparent label.

CSS

div.container {
  width: 400px;
  height: 300px;
  background-image: url(https://i.postimg.cc/X7PZmB5n/1572347-s.jpg);
  background-size: cover;
  background-position: right center; 
}

div.container .title {
  position: relative;
  top: calc(50% - 2em);
  width:　100%;
  text-align: center;
  padding-top:0.5em;
  padding-bottom: 0.5em;
  background-color: rgba(255, 184, 41, 0.6);
  color: white;
  font-weight: bold;
  font-size: large;
}

HTML

<div class="container">
  <div class="title">
</div>

Add a gradient to the background color

You can specify a gradient as well as a solid color for the background color.
Let’s take a look at a sample.

CSS

div.gradient {
  width: 300px;
  height: 150px;
  background: linear-gradient(#f06330, #ffb499); /*  */
}

HTML

<div class="gradient"></div>

To specify a gradient, use the “linear-gradient()” function.
The first argument is the start color and the second argument is the end color.

Also note that the CSS specification is “background” instead of “background-color”.

Specify the direction of the gradient

The “linear-gradient()” function will normally apply a gradient from top to bottom if nothing is specified.
If you want to apply a gradation in the horizontal or diagonal direction, you can apply the gradation from a different angle by specifying the angle before the start color.

In the sample, the CSS is changed so that the gradient is applied from left to right with a 90 degree shift.

div.gradient {
  width: 300px;
  height: 150px;
  background: linear-gradient(90deg, #f06330, #ffb499); /*

Tips for choosing the right color

The background color is the color that is placed behind the text, so it should be easy to see the text drawn over it.
Therefore, you need to be careful not to set a color similar to the text color or choose a color that is not easy on the eyes, such as a vivid color.

However, it is also true that there are too many choices when it comes to choosing a background color.
In such a case, it is a good idea to refer to the design guidelines called “Material Design” recommended by Google.

Not only can you learn the color arrangement in each Google application including Android, but it also presents the character color (white or black) to be combined.
The site is in English, but there are also sites that explain the overview in Japanese, so please refer to them.

summary

We introduced how to set the background color in CSS and technologies such as transparency.

If you can set the background color as you want, there is no doubt that the image of the site will be improved.