Welcome back! This week we’re going to take a moment to look at the CSS property, Backgrounds. Using this property we can significantly change both the look and mood of any website. A good example of the effect backgrounds with an imags can have, comes from the website for Tom Cole Architecture. In the image below, I have opened the web inspector and highlighted the CSS used to place the background image. 
A couple things to notice is the image is set to cover, which will fill the container it is applied to. The background position is also set to be centered in the container. The image creates a unique atmosphere, making the viewer feel like they are looking out of the room at the landscape and not just a computer screen. So what makes the background property so powerful? Lets take a look at a couple of the many possible applications as referenced from the W3Schools website.
Background-color
First, we’ll start with the most basic use of backgrounds, changing the background color. Changing the background color can have multiple uses. One use is to separate sections visibly through contrasting colors. Setting the background color to dark tones can create a scary or depressing mood. Using bright and lively backgrounds can make a fun and entertaining setting. This basic operation can be accomplished by adding the following CSS code to change the background color of the body.
body {
background-color :blue;
}
Lets take a look at background-color in action. In following Codepen, we have set the body background color to blue and then changed the background color of title section to be green. Notice how the use of background colors makes the title section standout from the body.
Background-image
While simply setting the background color can add definition to areas of your webpage, using the background image can bring your page to life. Background images can be applied to the body, sections, and division in you CSS file. The image used must be located in a file that is accessible through either a URL or directory of the application requesting it. They say a picture is worth a thousand words, so why not use your background as part of the story. One disadvantage of using images for your background could be increased load times depending on the device and connection speed. Adding the following code to your CSS file will set your background image to cover the body.
body {
background-image: url(“your image file’s URL goes here”);
background-size: cover;
}
To show the use of the background-image property, we have set up the Codepen below. I have set the background to an image used in one of my glitch projects of a waterfall. The background image is set to cover and not repeat. Cover will stretch the image to cover the entire page. Repeat will instead stack multiple copies of the image next to each other to fill the page. Notice how the image is more effective telling a story than simply changing to a different color.
Background-repeat
We’ve seen how using 1 image to cover the background can bring your page to life. Now let’s take a look at some of the background-repeat choices available to us. We will look at 3 different background-repeat settings and their corresponding results using CodePen examples. These settings are: repeat, repeat-x, and repeat-y.
The first one will fill the entire screen with copies of our blue twitter bird. To accomplish this you would use the following code snippet on the body or section you want to fill.
body {
background-image: url(“your image file’s URL goes here”);
background-repeat: repeat;
}
To have your image only repeat across the page horizontally, you could use the following code.
body {
background-image: url(“your image file’s URL goes here”);
background-repeat: repeat-x;
}
Lastly, we will repeat our image vertically down the screen using this code.
body {
background-image: url(“your image file’s URL goes here”);
background-repeat: repeat-y;
}
Fixed Background Location
The previous sections have demonstrated how we can add color to whole backgrounds or even images to cover them. Now let’s take a look an how we can use backgrounds to place a fixed image on the screen. You may be wondering why you would ever want something in a fixed position on your background. This can be convenient to use if you wanted your company logo displayed in a set location on the screen. You could choose a position from the center or any of the four corners of the page. The code snippet below added to your CSS file would place the image in the right top corner of a white colored background. With the position set, the image will stay on the visible screen in the same position as the viewer scrolls the page up or down.
body {
background-color: white;
background-image: url(your image file’s URL goes here);
background-repeat: no-repeat;
background-position: right top;
}
Now let’s take a look at this code in use. The Codepen below has a blue twitter icon position to the background center. With the background position set to be fixed on center, as you scroll down the filler text you’ll notice the image stays in the center of the viewable area. Granted, you probably do not want a big blue bird in the center of your page. You may however, want your company logo with the opacity lowered, to create a slightly visible image of it always on screen.
While we only covered a few of the possible uses of the background property in CSS, I hope you have enjoyed it enough to do some experimentation of your own. Maybe even toy with images set to repeat, filling the background with numerous smaller copies. After all, who doesn’t like a screen full of cupcakes or peppers in the background.
References:
(n.d.). Retrieved October 17, 2020, from https://www.w3schools.com/cssref/