A tutorial about CSS background properties

CSS background properties are very useful when you want to create a creative design. It is no longer necessary to do the full styling of containers or buttons in a design program like Photoshop, you can just use your browser. In this tutorial we describe commonly used CSS background properties and illustrate them with examples. Except for Internet Explorer 8 and lower, the browser support for most of the CSS background properties is good, so feel free to use them in all your websites.

Background gradient

Of course you can simply choose a single color and use it as the background color with the background-color property, but this might be a little boring. With a background gradient, your website looks a lot fancier. Background gradients are supported by all major browsers, so its save to use them. The following code is used to create the example below:

background: linear-gradient(#333 0%,#f6f6f6 45%,#f6f6f6 55%,#333 100%);

Within the parenthesis, color codes are followed by percentages. 0% indicates the top, 100% the bottom. In this example, a gradient from color #333 to #f6f6f6 is generated between the top and 45% of the height of the image. Next, between 45 and 55% a single color is used (#f6f6f6). For the lower part, another gradient is generated. By default, the gradient is displayed from top to bottom. By adding ‘to right’, ‘to left’, ‘to bottom’ or ‘to top’ as a first parameter of the linear gradient, the direction of the gradient is changed and horizontal gradients can be created. In addition, radial gradients are generated using the background:radial-gradient property.
CSS background gradient

Background images

With a cool image, your website can become even more exciting. The use of background images is easy. Just upload the image to your server and reference its path in the CSS. Background images are often used in combination with the background-size property. Obviously, with this property the size of the background image can be specified. This can be in pixels or as a percentage, but more interesting are the ‘cover’ and ‘contain’ values.

With ‘cover’ the image is displayed such that the full area is covered by the image. No whitespace is left and possibly part of the image is cut off to obtain this effect. With ‘contain’ you make sure that the full image is displayed, even if it results in whitespace besides or below the image.

The example below is created with an images called ball.png and the background size set to cover.

background:url('ball.png');
background-size:cover;

CSS background image

Multiple background images

Background images are very well supported by most browsers, and this also applies for the use of multiple background images for one element. When using multiple images as a background, the positioning of these images becomes more important. Luckily, the position and size of each of the images can be separately adjusted.

We used the following code for the example below:

background:url('heart-full.png') 12px 10px no-repeat,url('heart-empty.png') 482px 10px no-repeat,#990100;
background-size:90px auto, 90px auto;

The background tag is followed by three comma separated parts. The first and second part specify the two images. The url of the image is followed by its position. Image 1, the full heart, is 12px from the left of the container and 10px from the top. This images should only be shown once as indicated by the no-repeat keyword. The last part of the background tag is only a color code, this is the background color.

With background size, the sizes of each of the images is specified. Both images are 90px wide and the auto indicates that original ratio of the images should be retained. For this specific case where both images have the same size, background-size: 90px auto; would have been sufficient. This size would automatically apply to both images.

CSS multiple backgrounds

Background repetition

When you use an image as background, this is automatically repeated, unless you add the no-repeat keyword. Personally, I usually don’t want a background image to be repeated, but there are some exceptions. The example below is created by repeating this background image:

squares

#background-repeat {
    background: url('squares.jpg');
    border: 10px solid #333;
    box-sizing: border-box;
    background-position: -9px -8px;
    position: relative;
}

#background-repeat p {
    font-family: 'Asap';
    text-shadow: 2px 2px #f6f6f6, 2px -2px #f6f6f6,-2px 2px #f6f6f6, -2px -2px #f6f6f6;
    background-color: rgba(230,230,230,0.7);
    width: 500px;
    height: 250px;
    position: absolute;
    top: 2px;
    left: 41px;
    padding-top: 25px;
    box-sizing: border-box;
}

First, we specify the url of the image and omit the no-repeat keyword. Consequently, the full area is covered with this squares image. With background position, we shift the background images a bit, so that it is nicely aligned.

The text is inside a <p> tag and we added some CSS for the size and position of this paragraph. We give the paragraph a transparent background by using a rgba color code. The first three values range from 0 to 255 and indicate the color, the last parameter indicates the opacity of the background.

CSS background repeat

What do you think?

Did you enjoy reading this tutorial? Was this tutorial useful to you? We like to hear your opinion, so please leave your comments below!

These examples are created using the color palette ‘Walking away’ from www.colourlovers.com

Mijn Twitter profiel Mijn Facebook profiel
Leonie Derendorp Webdeveloper and co-owner of PLint-sites in Sittard, The Netherlands. I love to create complex webapplications using Laravel! All posts
View all posts by Leonie Derendorp

Leave a Reply

Your email address will not be published. Required fields are marked *