How To Set Background For Whole Page In Css

One of the most heady moments in any budding front end-cease developer's career is learning how to change the background color of a web folio.

Working with HTML is not bad and all, but with only a few lines of CSS you tin make your pages, and your programming journey, bloom to life.

This guide volition embrace everything y'all demand to know on how to change the background color with CSS.

Become Set

Allow's knock out a little preliminary work.

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

Create a binder for your projection'southward files.
Create an index.html file to firm your HTML. You can employ boilerplate code, or but fix some <html>, <head>, and<body> tags.
Create a styles.css file for your CSS.
Link your CSS file with the HTML by placing<link rel="stylesheet" href="styles.css">inside the <head> tags.

Now you're fix to become started editing the CSS.

How to Change the Background Color With CSS

The simplest style to change the background color is by targeting the torso tag. Then, edit the background-color property. You can notice 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 bluish.

The background-color holding accepts colors in 6 different forms:

name: 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%, one);wherea is alpha (opacity)

Use the autograph background property in place of background-colorto cut actress code. Y'all can change any HTML element'due south background color using this method.

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

                      torso            {
            background-color:            rgb(191, 214, 255);
}
            .container{
            brandish:            flex;
            justify-content:            center;
            align-items:            middle;
            height: 90vh;
}
            .console            {
            groundwork:            rgb(255, 148, 148);
            top: 10rem;
            width: xxx%;
}
            .muo-text            {
            font-size: 3em;
            font-weight:            bolder;
            font-family: 'Franklin            Gothic            Medium', 'Arial            Narrow',            Arial,            sans-serif;
            position:            absolute;
}

Here you tin can encounter the body groundwork property is styled independently of the .console background belongings.

css light blue background with red panel

The groundwork property also accepts gradients:

                      torso            {
            background:            linear-slope(xcdeg,            rgba(234,233,255,1) 0%,            rgba(252,167,213,ane) 35%,            rgba(194,245,255,i) 100%);
}

How to Change the Background Paradigm in CSS

What if yous want the background to be an image rather than a solid colour or slope? The autograph groundwork property is a familiar friend.

Make sure the paradigm is in the same binder every bit your HTML and CSS files. Otherwise you'll accept to utilise the file path inside the parentheses rather than just the name:

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

Whoah! Looks like the image is manner too zoomed in. You lot tin prepare that with the background-size property.

                      body            {
            groundwork:            url(leaves-and-trees            .jpg);
            background-size:            embrace;
}

To use the autograph background property in conjunction with the groundwork-size property encompass, y'all must also specify background-position properties and separate the values with a backslash(even if they're default positional values such as top left.)

                      torso            {
            groundwork:            url(leaves-and-trees            .jpg)            tiptop            left            /            comprehend;
}

There yous go! A properly sized groundwork image in ane line of CSS.

Annotation: 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 lot 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 groundwork-paradigm properties are old news. Luckily, there's always something new to acquire.

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

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

Read Side by side

About The Author

Marcus Mears III (30 Manufactures Published)

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