How To Use CSS Background Images
Among the most welcome capabilities given to website designers by CSS Level 3 were all of the enhancements to the 'background' property - especially mutliple backgrounds. Controling the size and position of a background image is enormously useful for business websites that absolutely must use responsive design these days. But multiple background images open up a whole new realm of creative design possibilities. I had this point driven home to me recently while working on a client's website.
I had recently installed Wordpress for the client, and was working on customizing a template when I ran into a problem with the header background image. The header already had a very nice background image, but then the client requested that his company logo appear in a particular location in the header background. The template followed good responsive design principles and the background image we had selected adapted itself pretty well to being displayed in almost any browser window size - that is, until I tried to add the logo image. Beyond the fact that no business owner wants his logo distorted when viewed at different window sizes, the logo was plain ugly and often illegible at anything other than its original size. On top of that, overlaying the logo on the original background image added enough detail that the size of the image file exploded to nearly a quarter of a megabyte, which is no good in these days of data caps on mobile devices and page speed issues in the search engines. So I was forced to try a different design technique: multiple background images.
Using Multiple Background Images
Using mutliple background images requires more than simply adding additional URLs to the CSS rule. You also need to specify the size and position of each background image. CSS Level 3 gives you complete control over these background image properties so you can adjust them to suit your design. This tutorial will give you a good overview of how to use these new CSS properties effectively, starting with the basic method of using multiple background images.
In addressing the problem for my client, I mulled over the possibility of adding a div to the template's header just to display the client's logo, but I was trying to avoid modifying the Wordpress theme template files whenever possible and it was so much easier to just modify the stylesheet. I was hoping a much more elegant solution would occur to me, but I was getting nowhere until I suddenly remembered I could use multiple background images. I'd known about them for several years, but I'd only used them once because I always had to account for older versions of Internet Explorer. Thankfully, the limited versions of Internet Explorer now make up less than 1% of all users, and since this is purely an issue of esthetics and not functionality, using multiple backgrounds was the elegant solution I needed. The bonus part was in realizing that by using media queries, I could not only resize and reposition the client's logo for small displays, I could also use a much smaller image for the primary background, which gave me a significant speed boost!
The HTML for above div is very simple. It's just two paragraphs that each contain a link. There are two background images set with CSS, the big picture of Victoria Falls in the back and the Rainbo Design logo image on top of it. If you resize your browser window, you'll see there are two distinct images. With its 'background-size' rule set to "100% 100%", the waterfall image scales to fit the containing div while the size of the Rainbo Design logo, whose 'background-size' is set to "auto" (see below), remains unchanged. The CSS used here doesn't fully employ responsive design techniques, but it does illustrate the possibilties of multiple backgrounds that CSS Level 3 provides.
To set multiple backgrounds, all you need to do is include the source URLs in the CSS 'background-image' rule, separated by commas, and in the order in which you want them layered starting from front to back. Similarly, to position multiple background images, just list the settings for each background image in your 'background-position' rule - again, separated by commas and corresponding to the order in which they appear in the background-image rule. The 'background-size' property allows you to control the size of your background images. A setting of 100% fills the element's dimensions, while a setting of 'auto' uses the image's native dimensions.
CSS3 Background Size
The 'background-size' property is demonstrated in the boxes above. As you can see, there are four common settings: (1) pixels, (2) percentage, (3) Cover, and (4) Contain. The first two, naturally, set the width and height in either explicit measures (px, em, etc.) or as a percentage of the containing element. The syntax is 'background-size: width(px, em, or %), height(px, em, or %);'. If you only set one value, it sets the width and the height is set to 'auto', which means it will be set in proportion to the width. If you use 'auto' alone, the background image is rendered in its native dimensions. Setting the background-size to 'cover' causes the image to be sized to completely fill the containing element (regardless of the resulting distortion). A setting of 'contain' means that the background image is sized so that it is completely visible without distortion within the containing element.
CSS3 Background Position
Position: right top
Position: left bottom
Position: center top
Position: center center
The 'background-position' property, of course, controls the position of the background within the containing element. The syntax is 'horizontal, vertical' and the possible values are length (px, em, %, etc.) or keyword (left, right, top, bottom, center), as in:
background-position: center top; /* keyword */
When using multiple backgrounds, the syntax for the 'background-size' and 'background-position' properties are identical to the 'background-image' property: you just include the setting for each background separated by commas, as in:
background-position: left top, center bottom;
This page was last modified on October 01, 2020
