Beyond the Basic Background CSS3

To make the web page shown in Figure above look more like a realistic piece of paper, you would want to add some extra graphic details beyond the lined background, like a torn edge or a coffee stain. Without CSS3, it’s certainly possible to add these graphic details. But new properties in CSS3 make it easier and keep your markup cleaner. Let’s add some of these new properties now to enhance the background.

Scaling the Background Image
One thing that would make the background look more realistic is if the text were aligned to the notebook paper lines, instead of overlapping them indiscriminately. To fix this without CSS3, you would need to set a base font-size and line-height in pixels, and then adjust the spacing between the lines in your background image to match. This would work for most users. But if anyone resized the text, or had non-standard user settings to override the pixel font sizes, the text would become misaligned.

The text could scale, but the background image couldn’t.
But that was then—before the CSS3 background-size property was introduced. With background-size, you can control the horizontal and vertical scaling of a background image as well as how it stretches to cover the background area and gets clipped.

HOW background-size WORKS
Before we apply background-size to our page, let’s look at a couple of simple examples to get a better grip on how the property works.

an image 200 pixels wide by 120 pixels tall. the image looks when set as a normal repeating background of a div that’s 500 pixels wide by 200 pixels tall; since the div’s dimensions aren’t an even multiple of the image’s dimensions, some of the image gets cut off on the right and bottom.

An image that’s 200 pixels wide by 120 pixels tall

An image that’s 200 pixels wide by 120 pixels tall

When the image is repeated across the background of the div, some of it gets cut off on the right and bottom.

When the image is repeated across the background of the div, some of it gets cut off on the right and bottom.

We can use the background-size property to scale the image down from 200 pixels to 100 pixels wide:

The first value in the background-size property, 100px, sets the width of the background image. The second value, auto, sets the height. A value of auto makes the height whatever it needs to be to preserve the aspect ratio of the image. If you leave the second value off, the browser assumes it to be auto, so a value of background-size: 100px; would have worked identically here. Compare Figures above to see how the background image has been shrunk but kept its aspect ratio.

The browser has scaled the image to 100 pixels wide, so it now fits in the div exactly five times and doesn’t get cut off on the right.

The browser has scaled the image to 100 pixels wide, so it now fits in the div exactly five times and doesn’t get cut off on the right.

If you use percentages in the background-size property, they’re relative to the box the background is on, not to the background image itself. If you wanted exactly two copies of the image to show in the div, with neither cut off at all, you could use this CSS:

The image is stretched to fill half the width of the div and all of its height, and then repeated . In this case, the browser has to both distort the shape of the image and scale it up, making the edges in the image look a little blurry or pixelated. As with any browser-based scaling, background sizing is not going to look good with all images, but can work quite well with grungy, abstract, or very simple images that don’t have super-clean edges such as our linedpaper background.

The browser has scaled the image to fit twice across the width and once across the height, distorting it but keeping it from cutting off.

The browser has scaled the image to fit twice across the width and once across the height, distorting it but keeping it from cutting off.

MAKING THE PAPER LINES SCALE WITH THE TEXT
In order to make our paper background image scale with the text, we need to set its dimensions not in percentages or pixels, but in ems. Ems are a relative unit of measurement based on the current font height.

To get started, download the exercise files for this chapter at www. stunningcss3.com, and open paper_start.html in your code editor of choice. Its CSS is contained in a style element in the head of the page.

Find the #paper rule in the CSS, and add the background-size property,
plus the Mozilla and Webkit equivalents:

Opera, Chrome, Safari 5, Firefox 4, and IE 9 use the standard background- size property; Firefox 3.6 and Safari 4 and earlier use the -moz- and -webkit- versions of the property, respectively. In each property, we’re telling the browser that we want the height of the image to be 1.6 ems and that we want the width to just size itself proportionally.

The image depicts one line on the paper, so that means that the space between every line will now be 1.6 ems tall. Why 1.6 ems? The height of each line of text is 1.6, specified by the lineheight already in place on the body element:

that the background image’s size has indeed changed, but the text is still not lining up with the lines in the image. This is because we haven’t set all the text sizes and margins to line up with a regular spacing of 1.6 ems. The paragraph and list text have the correct spacing for the background image, since their line-height is already 1.6 and their bottom margins are 1.6 ems,as you’ll see in the CSS. But the headings need to have their margins tweaked to fall in line.

The background image lines are closer together after applying background-size.

The background image lines are closer together after applying background-size.The background image lines are closer together after applying background-size.

These margin values are based on trial and error. Unlike with absolute pixel-based measurements, you’re not going to be able to find values that work perfectly for all browsers; each browser has different ways of rounding and translating relative measurements like ems into the pixels displayed on the screen. In this case, these margin values work well for Firefox, Safari, and Chrome. Everything is spaced out at regular intervals of 1.6 ems, keeping the text aligned to the lines in the background image (Figure below).

The text is now aligned to the lines in the background image, shown here in Firefox 3.6.

The text is now aligned to the lines in the background image, shown here in Firefox 3.6.

But in Opera, the text isn’t aligned, as Opera sizes the background image just slightly smaller than the other browsers. If we were to adjust the font sizes and margins to make everything line up in Opera, it would mess up the alignment in the other browsers. You’ll have to decide which browsers are more important to you, based on your own site’s visitor statistics, and cater your measurements to those.

Once the text is aligned with the background image, if the user has a different default text size from the norm, or scales the text size up or down, the background image scales with it, keeping the lines always aligned with the text. Also, if you were to later change the base font size on the body element, everything would scale to match, without your having to remake the background image.

Even if the user has a larger text size, the text stays aligned with the background image lines.

Even if the user has a larger text size, the text stays aligned with the background image lines

WORKAROUNDS FOR IE
The background-size property doesn’t work in IE 8 and earlier, and there are no workarounds to directly emulate it. In this case, it’s a minor visual effect, so I think we can chalk it up as progressive enhancement and not worry about its lack in IE.

You can, however, provide alternate styles using Modernizr, which does detect for support of the background-size property. For instance, you could provide a different background image altogether, or you could provide an alternate version of the lined paper background image that has been designed to fit with a particular pixel font size; you would set this pixel font size only for browsers that don’t support background-size. We don’t recommend doing this here, as pixel-based font sizes are bad for accessibility. However, Modernizr is a good option in general for providing alternate styles when you’re trying to scale a background image using background-size.

TABLE: background-size browser support

TABLE: background-size browser support

Multiple Background Images on One Element

One of the changes to CSS that has brought web designers the most joy is the ability to apply multiple background images to a single element. In our example, we’ll be able to use this function to make the paper look a little more realistic—we’ll beat it up a bit by adding some stain images, as well as adding a thumbtack at the top.

Before CSS3, only one background image per box was allowed, so you’d have to add an extra div for each extra image and apply one image to each div. If you could count on other particular blocks already being inside your divs, such as a h3 element always being the first nested element, you could apply background images to these other blocks instead of adding extra divs. However, doing so could be risky, as you would be relying on certain types of content always being present and in particular places; if those pieces of content weren’t there, of course their background images wouldn’t show up.

This nesting divs method wasn’t difficult, but it was messy. It junked up your markup and increased the pages’ file size. To add more images later, you’d need to not only change the CSS, but the HTML as well.

With CSS3, you can leave the HTML alone and instead simply list each background image in the background-image or background property, separated by commas. Each image can be positioned, repeated, sized, and otherwise controlled independently.

Figure below shows the extra images we want to apply to our article div.
To apply them, add a new background declaration under the existing one in the #paper rule:

The five extra background images to add graphic detail to the notebook paper

The five extra background images to add graphic detail to the notebook paper

The first background declaration will continue to be used by IE and other browsers that don’t support multiple background images. Because they don’t understand the syntax of the second background declaration, they’ll ignore it. Browsers that do support multiple background images will override the first declaration with the second.

The background images are layered on top of each other, with the first declared image put on top of the stack. That’s why the thumbtack image is listed first and the lines image is listed last. We’re not quite done yet, though. We haven’t told the browser how we want to repeat, position, and size each image. To do this, treat each snippet between the commas as if it were its own standalone background shorthand property, and write each of the background-related properties in it accordingly. Figure below shows all the pieces that can go in the background shorthand property. The order matters for some and not for others, so I recommend sticking with the order just so you don’t get confused or accidentally make a mistake.
(I know I would otherwise!)

The background shorthand property can contain multiple layers; the top layer of this diagram includes all the possible pieces of the property (minus color, which can go only into the final layer).

The background shorthand property can contain multiple layers;

Using the order shown in the diagram in Figure below, add the positioning and repeat values after each image in the background property:

Next, modify the background-size properties to tell the browser that each image should be sized using its native dimensions, exceptfor the last (the lines image):

Each comma-separated value matches up with the comma-separated value at the same spot in the background property’s value list.

Although you can technically include background-size information in the background shorthand property, it won’t work right now. Older versions of Firefox and Safari need background-size declared using the vendor-prefixed properties, and although Opera, Chrome, Safari 5, Firefox 4, and IE 9 might accept background-size in the background property, adding it would break those older versions of Firefox and Safari. So, to keep it working everywhere, and to keep yourself from confusing the values for background-position and background-size (very easy to do!), keep background-size written separately from background.

Save your page and view it in an up-to-date browser. You should still see the text aligned with the notebook paper lines, but also see four stains scattered across the paper and a thumbtack at the top .

All six background images show at various points across the div.

All six background images show at various points across the div

All six background images show at various points across the div

The nice thing about setting each of these images independently, instead of combining them into one big image that you set on a single nested div, is that the images can move around based on the size of the div. No matter what size or dimensions the div has, there will be stain images distributed nicely across it, instead of clustered in one spot.

Multiple background images browser support

Multiple background images browser support

WORKAROUNDS FOR NON-SUPPORTING BROWSERS
IE 8 and earlier plus older versions of Firefox and Opera don’t support multiple background images. In a case like this, where the additional images are just extra decoration, you don’t have to worry about providing workarounds. They’ll still see the lined-paper background, which is a complete image in itself, with no clue that anything’s lacking.

However, there may be times when missing out on the extra images would create an overall effect that looks incomplete or broken. For instance, if you’re using multiple background images to create a complex button, with a left, middle, and right slice, the button will look broken if only one slice can be seen. Be careful about using multiple background images in cases like these, as you only have a few options for workarounds:

Use a single fallback image. The simplest workaround for nonsupporting browsers is to provide it with a single background image, either in a separate background-image declaration listed before the one using multiple images (the method we’ve used here) or by using Modernizr. Make sure this single image can stand on its own. This is easy to implement and doesn’t harm supporting browsers, but it won’t provide a sufficient appearance in cases where the page truly looks broken without the extra images.

Nest divs to hold extra images. A more robust but work-intensive workaround than the single fallback image is to go back to the old method of nesting divs and applying separate images to separate boxes. If you do this, you’ll need to use Modernizr or IE conditional comments to feed different rules to browsers with different support. Otherwise, you’d get double the backgrounds in browsers that support multiple background images. Of course, if you’re going to be adding the extra divs and background rules anyway, you might as well stop using multiple background images at all and just use this old technique for all browsers, regardless of support.

So we are not sure that this workaround makes a lot of sense.
Generate the extra elements to hold extra images. A cleaner way of implementing the “Nest divs” workaround is to use the :before and :after pseudo-elements to generate extra elements, to which you can then apply extra background images. The article “Multiple Backgrounds and Borders with CSS 2.1” by Nicolas Gallagher explains how to do this. This would work well for IE 8 and Firefox 3.5, for instance, but IE 6 and 7 don’t support these pseudo-elements, making this technique fail to work in those browsers—unless you also added a script to force older versions of IE to support these selectors. And you’d need to make sure browsers that do support multiple background images don’t see the images on the pseudo-elements. At this point, the workaround would be getting pretty complicated! Again, you’ll have to decide if what may amount to simply extra decoration is worth it for you and your users.

Use canvas. If you’re comfortable with scripting, you can use the
HTML5 canvas element to draw multiple images on a single element. IE 8 and earlier don’t support canvas, but Google’s “explorercanvas” script can make it work. Explaining how to use canvas is beyond our scope, but Hans Pinckaers’ mb.js script has already done the work for you, making multiple backgrounds work in IE and older non-IE browsers.

Adding a Graphic Border
Another graphic detail that would be nice to add is a border on the left side of the paper to make it look like it was torn from a spiral notebook . There are a couple ways we can do this with CSS3.

Torn spiral notebook-paper edge

Torn spiral notebook-paper edge

USING BACKGROUND IMAGES
One way to add the torn paper edge is by adding it as another background image, set to repeat down only. But the edge image has transparent areas in it (the holes in the paper), so the lines background image below it will show through. If our page had a solid background color instead of a pattern, we could fill the transparent areas of the edge image with that solid color, obscuring the lines background image and blending into the page background color seamlessly. But that won’t work in our page.

Without a solid background color on the page, your only option is to wrap another div around the paper div, and set the edge image as the background on this wrapper div. You could then give the wrapper enough left padding to keep the inner div from overlapping the edge image and obscuring it. This wouldn’t be ideal, since it would add extra markup, but it would work in all browsers and with all page backgrounds.

One small disadvantage of setting the edge image as a background is that we can’t control how it gets clipped at the bottom of the div. It’s possible that the div would end in the middle of one of the holes in the edge, which isn’t what a full sheet of real spiral notebook paper looks like . We will admit this is hardly a tragedy—it’s a very minor, nitpicky problem. But if we can fix the problem easily with CSS, why not fix it?

With the edge image as a repeating background image, it can get cut off in the middle of one of the holes.

With the edge image as a repeating background image, it can get cut off in the middle of one of the holes.

The CSS3 solution is to set background-repeat on the edge image to round—a new value for the property introduced in CSS3. This makes the browser repeat the image as many times as it will fit, and if it doesn’t fit a whole number of times, the browser rescales the image so that it will fit without clipping off at the end.

Unfortunately, only IE 9 and Opera support the round value at the time of this writing, and Opera does so imperfectly. So, backgroundrepeat: round is not a usable solution right now. Luckily, we can forgo using a background image entirely and use the new borderimage property instead.

USING border-image
CSS3 allows you to assign an image to a border, in addition to (or instead of) a color and line style. The browser will take a single image, slice it into pieces, and stretch or tile each of those pieces across each border.

For instance, let’s say that Figure below is the image we want to use for the borders on a div. We want to use the top 30 pixels of the image for the top border, the right 25 pixels for the right border, the bottom 27 pixels for the bottom border, and the left 34 pixels for the left border . We need to use these values as both our border widths and our border image slice locations.

This image has irregular borders that can be stretched and tiled using border-image.

This image has irregular borders that can be stretched and tiled using border-image.

The lines indicate where we want to virtually slice the image into pieces that can be tiled or stretched across the borders.

The lines indicate where we want to virtually slice the image into pieces that can be tiled or stretched across the borders.

The first part of the border-image value is the path to the image, which works just like any other path in CSS.

Next comes one or more numbers to specify where the browser should slice the image. In this case, we’re using four numbers, since we want four different amounts sliced off from each edge. The first number, 30, is the inward offset from the top edge of the image, in pixels. The second number, 25, is the inward offset from the right edge, the third is the offset from the bottom, and the fourth is the offset from the left. The browser will slice the image at each of these lines, creating nine images that it applies to each border, each corner, and the middle of the box.

border-image browser support

border-image browser support

How exactly the browser applies these images depends on the third part of the border-image property: the repeat value. In this example, we’re using a value of stretch, which will make the browser stretch all four border images, plus the center (but not the corners), to fill the available space. You can also set it to repeat , round , or space. (The round value is supported only by Firefox and Opera currently.) No browser currently supports the space value, so I can’t show you a screenshot!

This border-image has been stretched.

This border-image has been stretched.

This border-image has been repeated.

This border-image has been repeated.

This border-image has been rounded.

This border-image has been rounded.

APPLYING THE TORN-EDGE IMAGE
Let’s put border-image to use in our page to apply the torn-paper edge image, shown in Figure above, to the article div. We want to apply the image only to the left border, so we’ll make that border 50 pixels wide—the width of the image—and set the other borders to

Next, we’ll apply the border image, using the standard border-image property for Chrome and Opera and the prefixed properties for Firefox and Safari:

We’ve set each of the slice locations to zero except for the left one; we don’t want to slice off any from the top, right, or bottom, but we do want to slice in from the left edge by 50 pixels so that the entire 50-pixel-width of the image is used for the left border.

For the repeat value, we’ve used round to repeat the image but keep it from ending in the middle of a hole. Since Safari and Chrome don’t support this value, they treat it as repeat instead, which is an acceptable second choice.

USING background-clip TO POSITION IMAGES
Our edge image is now repeating down the left side of the div, but the background image is showing through it . That’s because, by default, borders are drawn on top of the background area. You may have never noticed it before, because usually your borders are just solid lines, without any transparent pieces. But change your border-style to dashed and you’ll see what I mean. Border images are placed the same way.
The torn-edge image repeats down the left side, but overlaps the background.

The torn-edge image repeats down the left side, but overlaps the background.

background-clip browser support

background-clip browser support

Luckily, we can change this default behavior with CSS3. CSS3 lets you control where backgrounds are placed relative to the borders with the new background-clip property. The default value, border-box, makes backgrounds extend under the borders as they’ve always done.

Setting background-clip to padding-box starts the backgrounds inside the borders, under the padding area:

Chrome, Safari 5, Firefox 4, and Opera use the standard property, while Firefox 3.6 and earlier and Safari 4 and earlier use the prefixed versions. Note also that the -moz-background-clip property takes a value of padding instead of the standard padding-box.

Making this change moves the lines background image out from under the border image .
The background-clip property moves the background image out from under the border image.

The background-clip property moves the background image out from under the border image

WORKAROUNDS FOR NON-SUPPORTING BROWSERS
Browsers that don’t support border-image won’t know what they’re missing, in this case, as they’ll still see the regular lined-background image.If you must have the torn edge, you can go back to using a background image for it on an additional wrapper div, as described earlier.

If you do this, you’ll either need to remove the border-image from all the other browsers, or you’ll need to hide the background image from the browsers that support border-image. I like the second approach, as it allows you the extra flexibility of having border images without too much extra work. Simply use Modernizr or IE conditional comments to create a wrapper rule that only certain browsers can see.

This rule would assign left padding and the edge background image:

The other browsers wouldn’t see this rule at all. They’d still see the wrapper div in the HTML, of course, but they wouldn’t apply any styles to it.

Alternately, you could combine the lined paper image with the torn edge image and apply this merged image to the existing div named paper. That would allow you to do away with the extra wrapper div, but it may be more work-intensive to have to maintain different images for different browsers. Again, you’d need to make sure that browsers that do support border-image continue to use the two separate images—one as the background and one as the border image.

There are a few ways to make border-image work through scripting, rather than ditching it in favor of background images. However, the scripting solutions work only when you’re stretching the border images, not repeating or rounding them, so a script won’t do in our case. But if your own project just needs stretched border images, check out:
PIE by Jason Johnston.
PIE also includes limited support for the border-image property in IE 6 through 8.
borderImage by Louis-Rémi Babé, a jQuery plugin that emulates border-image using VML for IE and canvas for non-IE browsers.

Adding a Drop Shadow
You learned about the box-shadow property to create drop shadows beneath boxes. Our notebook-paper article seems like a good place for it as well, so let’s add it. But we have to be careful—the drop shadow won’t conform to the ragged edge of the border image, but rather to the box as a whole. That means that if the drop shadow shows on the left side of the box, you’ll end up with a strange-looking straight-edged shadow that’s slightly offset from the jagged paper edge .

Drop shadows conform to the div’s straight edge, not to any jagged lines within border or background images.

Drop shadows conform to the div’s straight edge, not to any jagged lines within border or background images.

To avoid this problem, place the shadow far enough to the right to not peek out at all on the left edge. Add the following three lines to the #paper rule:

This creates a shadow below the right and bottom edges of the paper .

This drop shadow works better, showing on the right side of the div.

This drop shadow works better, showing on the right side of the div.

Since Safari and Chrome don’t support round for the repeat value on the border image, it’s possible to get a cut-off hole at the bottom of the paper, making the shadow underneath it look a little strange (. It’s not very noticeable, but if this really bothers you, remove the -webkit-box-shadow declaration. (Sometimes it’s nice having each browser declared separately, isn’t it!)

The drop shadow in Safari or Chrome might show up under an empty hole.

drop shadow in Safari or Chrome might show up under an empty hole.

Of course, now the drop shadow will be gone in Webkit-based browsers.

To create a drop shadow in Safari and Chrome without using -webkit-box-shadow, you could create an image of a shadow and apply it as a border image to the right and bottom borders, using the -webkit-border-image property.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

CSS3 Topics