Applying Backgrounds and Gradients with CSS

Learn everything from basic monochromatic backgrounds to images and gradients!

Scroll down...




In this lesson we're going to give you some background information. (Get it? I promise the jokes get better as we go along... or they at least stay the same, possibly get worse.) We'll start you out with the basics of how to set background colors and images for your elements. Then we'll send you out to read a walkthrough that dives deeper into the details and options available when working with backgrounds.

The background Property

The CSS background property is perhaps one of the most fun CSS properties to work with. It can be super simple to get started with and also provides tons of rich and precise functionality when you want more detailed results. Let's see it in action in all its glory: {
  width: 64px;
  height: 64px;
  background: red;

This will produce:

Amazing! Well... it gets better.

You can make all sorts of interesting backgrounds once you start messing with background images. Specifying an image as a background is as simple as using the CSS url() function and providing a URL:

#background-image-with-repeat {
  background-image: url("/assets/images/tile.jpg");

Once you have an image as a background you'll probably want to tweak its position and size. There are a bunch of detailed properties that you can use to set these. They actually allow you to specify part of what the background property allows you to set in one line. You can read up more on these properties here on the MDN docs.

Setting Backgrounds and Gradients

The code we've started you out with will allow you to set basic backgrounds but you'll soon want a bit more control over them. Your task is to read through Shay Howe's walkthrough on Setting Backgrounds and Gradients. He'll cover more details about setting backgrounds with various colors and the different properties available to you. He'll also dive into CSS gradients which add some colorful flare to your elements. You'll also get a chance to see the various background properties we talked about in action with live code examples!

Code Review

The important bits of code from this lesson {
  width: 64px;
  height: 64px;
  background: red;

Wrapping Up

Now that you've learned how to set background colors, gradients and images your ready to add some nice color schemes to your webpages. Background images are a great eye catching effect for various parts of your pages, especially large high def backgrounds for those landing pages! Gradients are just cool so keep them in your back pocket for when you really want eye catching styles. Combining and mixing these various options and properties can produce endless results so don't be afraid to explore a bit! For now, it's onward to more CSS with styling lists.

Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!

Next Lesson: Styling Lists in CSS