CSS Backgrounds

The background property in CSS is used to describe the background color, background image, or background orientation of any HTML element.

In it's simplest form we can specify a background color like so:

#box{
    width: 50px;
    height: 50px;
    background: red;
}

The above CSS would give us the following

CSS Background

The CSS background has many different properties which include:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Let's see how to use each of these below:

background-color

Using the background-color property will do the same thing we did above. I know you may be asking yourself... Well, what's the difference. They will do the same thing; however using the background-color will be more specific and this can come in handy in certain situations. We'll explain this a little more down the page.

#box{
    width: 50px;
    height: 50px;
    background-color: red;
}

CSS background-color property

background-image

The background-image property will allow us to specify an image to be used as a background for our HTML element. In order to add a background to an element you will add the value url( '/to/image.jpg' ); to the background-image property like so:

#box{
    width: 200px;
    height: 200px;
    background-image: url( 'https://cdn.devdojo.com/guides/css/bg.jpg' );
}

The above CSS would give us the following:

CSS background-image property

background-repeat

The background-repeat property will specify whether we would like our background image to repeat. If the HTML element that you are putting your background image is larger that the image itself, you may wish to tell the background-image to repeat.

#box{
    width: 100%;
    height: 200px;
    background-image: url( 'https://cdn.devdojo.com/guides/css/bg.jpg' );
    background-repeat: repeat;
}

The above CSS will repeat our background image:

CSS background-repeat property

Background Attachment

The background attachment will specify whether the background image should scroll with the page or stay fixed to the page. The CSS property background-attachment has a default value of scroll, but if we were to set this to fixed it would be fixed to the page when the user scrolls.

#box{
    width: 100%;
    height: 200px;
    background-image: url( 'https://cdn.devdojo.com/guides/css/bg.jpg' );
    background-attachment:fixed;
    background-repeat: no-repeat;
}

You can see a quick example of a fixed background orientation below.

CSS background-orientation property

Background Position

Using the background-position property we can specify how we where we want our background to be positioned. The background-position property takes in 2 values. The x, and y value. This can be specified in pixels or it can be specified with the following positions: left, top, right, bottom, center.

Here is an example of us positioning our background image in the upper right.

#box{
    width: 100%;
    height: 300px;
    background-color:#00ff00;
    background-image: url( 'https://cdn.devdojo.com/guides/css/bg.jpg' );
    background-repeat: no-repeat;
    background-position: top right;
}

Take a look at this example. You can see that we have a green background and the image is placed in the top right of the element.

CSS background-position property

Background Short-hand Property

Additionally if you want to save yourself some time and tidy up your code, you can use the short-hand version of the background property, which will have a value of color, image, repeat, attachment, and position like so:

#box{
    width: 100%;
    height: 300px;
    background: #00ff00 url( 'https://cdn.devdojo.com/guides/css/bg.jpg' ) no-repeat scroll top right;
}

We've just applied the background color, image, repeat, orientation, and position in one line. Very nice... You can see an example of what the code above will generate.

CSS background short-hand property

Great! Now that we have covered the Background property and are pretty comfortable with it, we can now move on to talking about CSS borders.