Revisiting the CSS Background Property_part1

In this tutorial we’re going to look into one of the older, more familiar CSS properties: background. background is one of several CSS properties whose features are often overlooked. In fact, it saw an upgrade with CSS3, receiving new capabilities beyond just adding a background image or color. Let’s look into some of them!

1. Background Position Offset

Positioning a background graphic is straightforward and something you’re likely familiar with already. If we want to position the background to the bottom right of the element, we apply bottom right to background-position. For example:

1. #workspace {
2.     width: 100%;
3.     max-width: 668px;
4.     height: 400px;
5.     background-color: #525d62;
6.     background-image: url(images/macbook.png);
7.     background-repeat: no-repeat;
8.     background-position: right bottom;
9. }

Or, with the shorthand, background, after the url definition:

1. #workspace {
2.     width: 100%;
3.     max-width: 668px;
4.     height: 400px;
5.     background: #525d62 url(images/macbook.png) no-repeat right bottom;
6. }

Since the advent of CSS3 we’ve been able to specify the position offset; the precise distances to the positions set. Taking our example of bottom right, we include bottom 20px right 30px to position our background at 20px from the bottom and 30px from the left.

1. #workspace {
2.     width: 100%;
3.     max-width: 668px;
4.     height: 400px;
5.     background-color: #525d62;
6.     background-image: url(images/macbook.png);
7.     background-repeat: no-repeat;
8.     background-position: right 30px bottom 20px;
9. }

The positions (bottom, top, right, left) can be defined in any order, but the offset length must be defined after each background position.

Credit goes to Metin Kazan for the illustrations.

2. Multiple Background Images

The background property also allows us to add multiple background images. Therefore, let's extend our previous example with more stuff and gadgets.

We add these images to a single background or background-image declaration by separating each one with a comma. We use the background-position property, which also accepts multiple values, to control each of those background images.

1. #workspace {
2.     height: 400px;
3.     background-color: #525d62;
4.     background-image: 
5.         url(images/macbook.png),
6.         url(images/mouse.png),
7.         url(images/hdd.png),
8.         url(images/phone.png),
9.         url(images/ipad.png),
10.         url(images/coffee.png),
11.         url(images/camera.png);
12.     background-repeat: no-repeat;
13.     background-position: 
14.             50% 50%,   /* macbook.png */
15.             75% 295px, /* mouse.png */
16.             75% 230px, /* hdd.png */
17.             96% 240px, /* phone.png */
18.             20% 250px, /* ipad.png */
19.             22% 190px, /* coffee.png */
20.             7% 280px; /* camera.png */
21. }

We can use fixed units (such as pixels), flexible units (such as percentages), or a combination of the two.

Each pair of values represents coordinates from the top left of the container element, to the top left of the image. For example, the top left of the camera image is 280px from the top of the container, then 7% of the available width across from the left.

Note: The available width is the total width of the container element, minus the width of the background image. Therefore a background image positioned 50% along the x axis appears exactly centered!

(Continue)
If you found this post interesting, follow and support us.
Suggest for you:

CSS: Foundation classes on CSS

CSS Animations: Create Amazing Effects on Your Website

Coding Made Easy: HTML & CSS For Beginners

Bootstrap 4 Rapid web development framework HTML CSS JS