CSS3 Series Part 2: Playing With Backgrounds

Introduction

Before reading this article, I highly recommend reading the previous part:

CSS3 Series Part 1: Introduction, Features, and Use of CSS3

Hello all, welcome to the second part of the CSS3 series. In this article, we will play with CSS3 Backgrounds.

My previous article provided an introduction to CSS and CSS3 including the new and old features inherited from the base versions and browser compatibility.

In this part, we'll explain backgrounds, how to apply multiple background images, how to do clipping of a background and a few other features to enhance our web pages.

Backgrounds

Background colors and images help to break up pages and focus our attention. In a web page, some images are an important part of the page content and must be embedded into the HTML using a <img> tag, others are simply decorative touches that should be added using CSS.

Using CSS for background images not only reduces your HTML markup, but it also reduces the clutter and makes it easier to maintain. It also provides a considerable amount of control over position and size.

The following are the topics I'm going to discuss:

New background properties in CSS3.
Repeating background images.
Adding multiple background images.
Clipping contents in the background.
Controlling and adjusting the position of background images.

Before proceeding, let's have a look at some background properties. Please find the following table for that.

Property	Values	Description
background-color	Color, Transparent	Sets the background color of an element.
background-image	url(‘image location’), none	Sets the background image of an element.
background-clip	Border-box, Padding-box	Specifies the painting area of the background.
background-origin	Padding-box, border-box	Specifies the positioning area of the background images.
background-size	Auto, length, percentage	Specifies the size of the background.
background-repeat	Repeat, repeat-x, repeat-y, no-repeat	Controls how background images repeat if smaller than the element. By default, images tile horizontally and vertically.

From the preceding properties, "background-size", "background-origin", "background-clip" belong to CSS3.

Adding multiple background images and repeating those images

In CSS3, you can add multiple images to your element using the "background" property.

Example

body
{
background: url('images/AppleTree.png'),url('images/GARDEN.jpg'),url('images/sky.png');
height:500px;
width:550px;
background-size: 50% 50%;
}

When we run this code in our browser, we'll get the following output.

In this example, we've created the preceding scene using 3 images, the first image is of the tree, the second image is the grass and the third image is the Blue sky. To fill the images into the entire background, we've specified the "background-size" as "100% 100%". And the image is repeated in the background because of its default behavior and that too is vertical. If you want to repeat your image horizontally then you can use "repeat-x" and for vertical "repeat-y".

If you don't want to repeat your image, set the "background-repeat" property to "no-repeat" and then you're done, as shown in the following example.

body
{
background: url('images/AppleTree.png'),url('images/GARDEN.jpg'),url('images/sky.png');
height:500px;
width:550px;
background-size: 100% 100%;
background-repeat:no-repeat;
}

When you set "background-size: 50%,100%;", you'll get the following output:

If you see in the preceding output, the third image is only set to half of the page.

Until here, we've seen the "background-repeat" and "background-size" properties. Now let's understand the other properties "background-origin" and "background-clip".

So, the background-origin property determines the background positioning area, in other words, the position of the origin of an image can be specified using this property.

The following are the initial values for the "background-origin" property:

Property	Value	Description
Background-origin	Border-box	background extends to the outside edge of the border
	Content-box	the background is painted or clipped within the content box
	Padding-box	no background will be drawn below the border

Let's look at the following example:

div{
border: 2px solid #ccc;
padding:40px;
background-image: url('images/ball.png');
background-color:cornsilk;
background-repeat: no-repeat;
background-position: left;
font-weight:bold;
font-size:20px;
}

The preceding code will make an <div> element with the border of 2px with an image in the background starting from the left without repeating and with a bold font of size 20px. Now we'll apply the "background-origin: border-box" property on this div element.

.exampleBB{
-webkit-background-origin:content-box;
-moz-background-origin:content-box;
background-origin:content-box;
}
<div class="exampleBB">
Example of Border-Box.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>

With this addition, we'll get the following output.

In the preceding output, the background image is starting from the border itself but the text or content is starting 40px from the border.

Now, let's view the same example with "background-origin: content-box".

.exampleCB{
-webkit-background-origin: border-box;
-moz-background-origin: border-box;
background-origin:border-box;
}
<div class="exampleCB">
Example of Border-Box.<br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div><br />

With this addition, we'll get the following output.

Now, we can clearly see in the output that when we used "content-box" as background-origin, background-image also begins from where the content is beginning, in other words, 40px from the border.

Next, we will learn the last background property of our article, "background-clip".

The "Background-clip" property specifies the painting area of the background. This property determines whether the background extends into the border or not.

If I say it in simple words, this property is very helpful for decorating the inner content of a background. For example, if you're making a box of 200px X 200px with a padding of 50px and you only want to decorate the contents inside that padding then the background-clip property will be very helpful.

Possible values for "background-clip" property are:

Property	Value	Description
Background-clip	Border-box	The background is clipped to the border-box
	Content-box	The background is clipped to the content box
	Padding-box	The background is clipped to the padding-box

1. If you set it to border-box, the background will be visible in the border areas.

2. If you set it to the padding-box, the background will not be visible in the border area but will be visible in the padding and content area.

3. If you set it to the content-box, the background will be clipped by any padding.

Graphical Representation:

Let's look at an example.

div{
border: 20px solid #333;
padding:40px;
background-color:yellow;
background-clip: content-box;
-webkit-background-clip: content-box;
}
<div class="exampleCB">
Smartphones, smart devices, smart wearables, smart homes, and smart cars. Everything smart seems to be a new era. :) <br />
Google has been working on self-driving cars for a while now. Tesla has been in the news for building some of the most advanced cars.
Recently, Apple has made major announcements about its new smartwatch, mobile payment, and new devices. Now Apple may be eyeing the car market after being a dominant player in the smartphone and tablet market. Apple Watch is expected to be available in April this year. <br />
WSJ reported on Friday that Apple is looking into how to manufacture its own self-driving car. The reports mentioned that Apple has set up a secret lab and engineers are working on a secret project code-named “Titan” focused on building an electric car. The company has several hundred employees working at the lab. <br />Smart cars were one of the hottest topics at the latest CES where car manufactures including BMW, Mercedez-Benz, Audi and others showcased their future models...
</div><br />

We'll get the following output on running our code.

When we change background-clip to "border-box" or "padding-box", the output for both properties almost looks the same if you'll apply border style other than transparent.

Example (border-box):

div{
border: 20px solid transparent;
padding:50px;
background-color:yellow;
background-clip: border-box;
-webkit-background-clip: border-box;
}

Example (padding-box):

div{
border: 20px solid transparent;
padding:50px;
background-color:yellow;
background-clip: padding-box;
-webkit-background-clip: padding-box;
}

Output (border-box):

Output (padding-box):

Note: To see the difference between both of the outputs, keep the border transparent.

So, this article was based on a CSS3 background. If you want you can test with other styles as well.

In this article, we've seen how to add a background to any element and how to repeat any image in the background. We've also seen the new feature of CSS3 background properties with which we can do clipping, adjusting positions of any image in the background.

In my future article in this series, we'll learn how to create a new background by mixing 2 or more colors and we'll also learn about various types of borders with which we can enhance the design of our web page. Until then keep learning.

If there's any mistake in this article then please let me know. Please provide your valuable feedback and comments that enable me to provide a better article the next time.