How To Change Background Html

One of the most heady moments in any budding front-end developer'south career is learning how to change the groundwork 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 journeying, blossom to life.

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

Go Prepare Upwards

Let's knock out a little preliminary piece of work.

Note: I recommend using Visual Studio Code with the Alive Server extension to view changes in real-fourth dimension equally you lot update the HTML and CSS.

Create a folder for your project'south files.
Create an index.html file to house your HTML. You lot can apply average code, or just gear up some <html>, <caput>, and<body> tags.
Create a styles.css file for your CSS.
Link your CSS file with the HTML past placing<link rel="stylesheet" href="styles.css">inside the <head> tags.

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

How to Change the Groundwork Color With CSS

The simplest way to change the background color is by targeting the body tag. Then, edit the background-color belongings. You lot 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 groundwork to a squeamish light blue.

The background-colour belongings accepts colors in six unlike forms:

proper noun: lightskyblue; (for a shut approximation)
hex lawmaking: #bfd6ff;
rgb: rgb(191, 214, 255);
rgba: rgba(191, 214, 255, 1);where ais alpha (opacity)
HSL: hsl(218°, 100%, 87%);
HSLA:hsla(218°, 100%, 87%, 1);wherea is alpha (opacity)

Employ the shorthand groundwork property in place of background-colorto cut extra code. You can change whatever HTML element's groundwork color using this method.

Create a <div> element and give it a course—in this example, the class ispanel. Set itsheight and width properties in CSS. Select the chemical element in CSS and color away.

          body {
            background-colour: rgb(191, 214, 255);
}
            .container{
            display: flex;
            justify-content: centre;
            align-items: centre;
            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: accented;
}

Here yous tin see the torso background property is styled independently of the .console groundwork property.

css light blue background with red panel

The background property likewise accepts gradients:

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

How to Modify 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 certain the prototype 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 only the name:

          torso {
            groundwork:            url(leaves-and-trees            .jpg)
}

Whoah! Looks similar the image is fashion 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 autograph groundwork property in conjunction with the background-size belongings cover, you must also specify groundwork-position backdrop and separate the values with a backslash(even if they're default positional values such every bit top left.)

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

At that place you get! A properly sized background image in i line of CSS.

Annotation: Exist wary of including large groundwork images that take upward a lot of storage space. These tin can be tough to load on mobile, where you take all of ii seconds to give users a reason to stay on the page.

Upwards Your CSS Game With CSS box-shadow

For a developer such as yourself, the background-colour and groundwork-paradigm 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 take never looked better!

How to Utilize CSS box-shadow: xiii Tricks and Examples

Read Adjacent

Nearly The Author

Marcus Mears III (30 Articles Published)

Marcus is a freelance tech journalist and Junior Editor for Programming at MUO. He's a lifelong learner, hobbyist front-end programmer, and short story author with three+ years of experience developing prose that keeps readers in the know.