Css

In the previous tutorial, we've decorated some containers using the background-color property.
Yet, there are more ways to make containers look more lively.
Let's talk more about backgrounds.

Start Reading ;

Set an image as background

We’ve used the background-color property some times in the previous tutorial. This time we’re gonna set an image as background of a container using background-image property. This is the syntax of the property:

background-image: url(path-to-image);

The path to the image depends on if your image is stored locally or somewhere else on the internet. In the example below, we’ll use an image which is hosted by postimg.org.

HTML code:

CSS code:

Result:

See the Pen Lovely Day by Kei Nart (@codenart) on CodePen.

We’ve used an image which has a beautiful green field. But the beautiful part of the image is hidden because the container’s size is smaller than the background image’s size. Let’s fix it in the next section.

The background-size property

The background-size property can be used with 1 of these 2 smart values: cover and contain. Those 2 values will both try to make the background images fit to containers’ size.

The background-size: cover; will make sure that the background image will fully cover container’s area.

The background-size: contain; will make sure that the background image will be fully displayed inside container.

Let’s duplicate our container and try both of those 2 values.

HTML code:

CSS code:

Result:

See the Pen Perfect Lovely Day by Kei Nart (@codenart) on CodePen.

As you noticed that the background image of the second container has the same width as the container but it has smaller height. By default, the background image is repeated to fill its container’s area.

To control repeating background image, there’s background-repeat property. It can be used with 1 of these 3 values: repeat-x, repeat-y, and no-repeat. Just try this property with the second container to see if it works. :D

P/s: The background-size property can also be used with a couple of length-values. The first value is width and the second one is height:

background-size: 500px 300px;

The background-position property

In usual, we want our background fully cover container’s area. So, there’s often a part of the background image is hidden. The background-position property can help us to set position of the background image and make sure the best part of the image will be shown. :D

This is the default values of background-position property:

background-position: left top;

The first value is horizontal position. It can be one of these values: left, center, right, or a length-value.

The second value is vertical position. It can be one of these values: top, center, bottom, or a length-value.

Let’s change our example in the previous section a little bit to see the background-position property in use.

HTML code:

CSS code:

Result:

See the Pen A Perfect Lovely Day by Kei Nart (@codenart) on CodePen.

Our tutorial about background-properties has finished. There’re also some other Background Properties for advanced utilizing that I don’t bring them into this tutorial. Here is a list of all Background Properties in case you want to go further:

Next: Border Properties ;