If you ever enter a website and see a plain white background, you know the creator didn’t take full advantage of the Background Property when using CSS. Designing a background to go along with your website can be one of the most useful tools when creating a fun and interesting site. You can add colors, images, and even readjust them to repeat or be resized. In this post, I’ll highlight some of the simple, yet creative ways to use the background property.

I’d first like to talk about creating  background colors. This is very simple, but can really spice up a dull looking webpage. I’ve created a very basic example through the CodePen tutorial below. https://codepen.io/danielle-ledonne/pen/MWWKeKm

Once you have all of your html elements set up, you’ll head over to the CSS template of your site. You’ll type in: “body { background-color: #95A1C4; }”, it’s just that easy! The number that I typed in is a hex color which you can just google. Or you can type in the direct color you want if you’re sure of what it is. So let’s say you want a plain blue background, you can type “blue” instead of the hex color. I used a hex color because I used a color picker online, which is a very simple way to find the exact color you want. The color picker generated the number for me and I just pasted it into my CSS template. Here is a photo of a website that used a few different colors for their background. Next to that is the coding behind the site.

 

Next I’m going to talk a bit about adding a background image into your site. This is also fairly simple to do. You can make a repeating background image or just one single one. I made a repeating one in this tutorial “https://codepen.io/pen/”

In the tutorial you can see that I just typed in:

body {
background-image: url(“https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQoEA7OncpdbCamBhWfliRLEaQLPlNiDLo62TG8Hp95HP6MeYW8Lg”);
}

When adding in your own background image, be sure to use a jpeg, gif, or png. All you need to do is copy the link for the image when you right click on the photo, and paste it in the “()” after “url”. Your image should appear very soon after. Because of the size of my image, it repeated several times, but that’s okay because it’s what I was hoping for. If you want the image to take up the full page, there are other ways to go about doing that with just a few small changes. Feel free to do a bit of extra research if you are at all interested in exploring that property further.

To the right is a photo of a website that uses a background image.

Here is the coding that goes on behind what you see when you open up that same webpage.

Lastly, I’d like to talk a bit about adding a background gradient. If you’re not looking to add an image to your website’s background, you can add a gradient. For this example on https://codepen.io/danielle-ledonne/pen/VwwejqZ, I’ve decided to make mine pink and white. All I needed to do was type in :

body {
background: radial-gradient(circle, pink, white);
font-family: fantasy;
color: brown;
}

The “background: radial-gradient(circle,pink,white);” section, is what made the background what it is. I added the circle part so that it wouldn’t be a plain up and down gradient. This is very simple but adds some color and uniqueness to a page. Here’s an example of a website that uses this same property:

As you can see, it’s not super cluttered, and makes for a very interesting effect. Be sure to check out all of these CSS properties when you’re working on your next site!