Saturday, May 15, 2021
HomePc and MobilesHow to Change the Background Color With CSS

How to Change the Background Color With CSS

One of the most exciting moments in any budding front-end developer’s career is learning how to change the background color of a web page.

Working with HTML is great and all, but with just a few lines of CSS you can make your pages, and your programming journey, bloom to life.

This guide will cover everything you need to know on how to change the background color with CSS.

Get Set Up

Let’s knock out a little preliminary work.

Note: I recommend using Visual Studio Code with the Live Server extension to view changes in real-time as you update the HTML and CSS.

  1. Create a folder for your project’s files.
  2. Create an index.html file to house your HTML. You can use boilerplate code, or just set up some <html>, <head>, and <body> tags.
  3. Create a styles.css file for your CSS.
  4. Link your CSS file with the HTML by placing <link rel=”stylesheet” href=””> inside the <head> tags.

Now you’re ready to get started editing the CSS.

Related: How to Create a Boilerplate Website

How to Change the Background Color With CSS

css blank background

The simplest way to change the background color is by targeting the body tag. Then, edit the background-color property. You can find color codes by searching for and using the Google Color Picker browser extension

body {
background-color: rgb(191, 214, 255);

This code changes the background to a nice light blue.

css lightblue background

The background-color property accepts colors in six different forms:

  • name: lightskyblue; (for a close approximation)
  • hex code: #bfd6ff;
  • rgb: rgb(191, 214, 255);
  • rgba: rgba(191, 214, 255, 1); where is alpha (opacity)
  • HSL: hsl(218°, 100%, 87%);
  • HSLAhsla(218°, 100%, 87%, 1); where a is alpha (opacity)

Use the shorthand background property in place of background-color to cut extra code. You can change any HTML element’s background color using this method.

Create a <div> element and give it a class—in this case, the class is panel. Set its height and width properties in CSS. Select the element in CSS and color away.

body {
background-color: rgb(191, 214, 255);
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;

Here you can see the body background property is styled independently of the .panel background property.

css light blue background with red panel

The background property also accepts gradients:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);

css gradient background with panelHow to Change the Background Image in CSS

What if you want the background to be an image rather than a solid color or gradient? The shorthand background property is a familiar friend.

Make sure the image is in the same folder as your HTML and CSS files. Otherwise you’ll have to use the file path inside the parentheses rather than just the name:

body {
background: url(leaves-and-trees.jpg)

css trees background zoomed in

Whoah! Looks like the image is way too zoomed in. You can fix that with the background-size property.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;

To use the shorthand background property in conjunction with the background-size property cover, you must also specify background-position properties and separate the values with a backslash (even if they’re default positional values such as top left.)

body {
background: url(leaves-and-trees.jpg) top left / cover;

css trees background properly sized

There you go! A properly sized background image in one line of CSS.

Read More: How to Set a Background Image in CSS

Note: Be wary of including large background images that take up a lot of storage space. These can be tough to load on mobile, where you have all of two seconds to give users a reason to stay on the page.

Up Your CSS Game With CSS box-shadow

For a developer such as yourself, the background-color and background-image properties are old news. Luckily, there’s always something new to learn.

Try giving your boxes a boost with CSS box-shadow. Your HTML elements have never looked better!

CSS Code
How to Use CSS box-shadow: 13 Tricks and Examples

Bland boxes look boring. Spruce them up with the CSS box-shadow effect!

Read Next

About The Author

Source link

Leave a Reply

- Advertisment -

Most Popular

Recent Comments

%d bloggers like this: