Background Images – Classic CSS and CSS3

Various properties that existed in CSS have been made extremely easy to implement in CSS3. In this tutorial, we would discuss two of these important properties: Background image size and multiple backgrounds.

The background size property is an amazing thing to have on your tool belt when you’re creating a liquid layout. An example of this could be when you have a background image for a container that is for the sidebar. The classic way of doing this would require tweaking to have the image repeat along the y-axis, but with CSS3 it’s like adding another background property. The code required in classic way was also long and cumbersome. Here it is:

Short and simple code used in CSS3 is as follows:

Now let’s talk a bit about multiple backgrounds. This is quite a powerful property and can be used in many web applications. Let’s see how this important property was implemented in classic way:

While same thing is implemented in much simpler and elegant manner in CSS3:

The syntax is easy and the code is short. So basically CSS3 has pretty much eliminated the need for unnecessary code and has made the life of programmers and web developers much easier.