Background Opacity & Images

Contact Us or call 1-877-932-8228
Background Opacity & Images

Background Opacity & Images

CSS3 introduces a new way to specify color values: hue, saturation, and light (HSL) values. As the W3C specification states:

Hue is represented as an angle of the color circle (i.e., the rainbow represented in a circle). This angle is so typically measured in degrees that the unit is implicit in CSS; syntactically, only a <number> is given. By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120. One way an implementation could normalize such an angle x to the range [0,360) (i.e., zero degrees, inclusive, to 360 degrees, exclusive) is to compute (((x mod 360) + 360) mod 360). Saturation and lightness are represented as percentages. 100% is full saturation, and 0% is a shade of gray. 0% lightness is black, 100% lightness is white, and 50% lightness is 'normal'.

The W3C offers a set of tables as examples of HSL values:

HSL tables

Also new in CSS3 is the ability to specify the alpha channel of a color, setting the opacity of the given color. We can specify color and alpha with rgba:

/* green with 50% opacity */
				background-color:rgba(0, 255, 0, 0.5);

or with hsla:

/* green with 50% opacity */
				color:hsla(120, 100%, 50%, 0.5);

Code Sample:

CssBackgroundTricks/Demos/hsl-alpha.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS3 HSL &amp; Alpha</title>
	<style type="text/css">
		#main {
			background-image:url(Images/gridme.png);
			background-repeat: repeat;
		}
		h1 {
			background-color:rgba(40, 50, 200, 0.4);
		}
		#bg {
			margin:0 auto 5% auto;
			background-image:url(Images/chicago.jpg);
			background-repeat:no-repeat;
			background-position: 10px 10px;
			background-color:hsl(120, 75%, 40%);
			width:320px;
			height:301px;
			position: relative;
		}
		#caption {
			position:absolute;
			left:10%;
			top:30%;
			width:80%;
			height:20%;
			padding-top:10%;
			text-align: center;
			background-color:hsla(120, 75%, 40%, 0.4);
		}
	</style>
</head>
<body>
	<div id="main">
		<h1>CSS3 HSL &amp; Alpha</h1>
		<div id="bg">
			<div id="caption">
				Willis Tower in Chicago
			</div>
		</div>
	</div>
</body>
</html>

Code Explanation

Our example, ClassFiles/CssBackgroundTricks/Demos/hsl-alpha.html, shows a page with a tiled background pattern, a title with semitransparent purple background, and an image element with background color and a semitransparent caption block in the center:

Page Image

We use a repeated background image on the #main <div>, a grid pattern. We apply a background color to the <h1> using rgba, setting the alpha to 0.4 - a 40% opacity.

The #bg <div> has a background color, using hsl (with no alpha setting), and a no-repeat background image (which doesn't cover the entire element). The #caption <div>, positioned absolutely on top of the #bg <div>, has a semitransparent green background, set with hsla.

The hsl, hsla, and rgba methods of specifying color are not supported in IE 7-8, but are supported in IE 9 and recent versions of other browsers.

The opacity Property

CSS3's opacity property makes it easy to change the opacity of images, text, <div>s, and other elements. Where before we might have resorted to PNG images with a semitransparent alpha setting, we can now change the opacity via CSS. Even better, we can change opacity more easily with :hover to create rollover effects. Let's look at an example:

Code Sample:

CssBackgroundTricks/Demos/opacity.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS3 Opacity</title>
	<style type="text/css">
		#img1 {
			float:left;
		}
		#img1:hover {
			opacity:0.5;
			filter:alpha(opacity=50);
		}

		#bg {
			background-image:url(Images/chicago.jpg);
			width:300px;
			height:281px;
			float:right;
		}
		#caption {
			width:80%;
			height:20%;
			margin:30% 10%;
			padding-top:15%;
			text-align: center;
			background:#fff;
			opacity:0.2;
			filter:alpha(opacity=20);
		}
		#bg:hover #caption {
			opacity:0.9;
			filter:alpha(opacity=90);
		}

		#footer {
			clear:both;
		}
		#footer p:hover {
			opacity:0.5;
			filter:alpha(opacity=50);
		}
	</style>
</head>
<body>
	<div id="main">
		<h1>CSS3 Opacity</h1>
		<img src="Images/chicago.jpg" alt="Chicago skyline" id="img1">

		<div id="bg">
			<div id="caption">
				Willis Tower in Chicago
			</div>
		</div>

		<div id="footer">
			<p>Left image opacity changes on hover; right image caption div opacity changes on hover</p>
		</div>
	</div>
</body>
</html>

Code Explanation

The page presents three main elements: an image on the left, an image on the right, and a footer. Here's a screenshot of the page before any changes to element opacity:

Opacity Before Hover

We apply a change to some aspect of each of the three elements when the user mouses over, via the :hover selector:

  • The left image, without caption, changes to 50% opacity (opacity:0.5;) when moused over.
  • The caption on top of the right image (the image is itself a background) changes from its initial 20% opacity to 90% opacity when moused over. Note that the opacity for the text in the "caption" <div> is also affected by the opacity change - unlike, in our earlier example, where the color setting (in which we set the alpha value) for a <div> does not change the opacity of child elements.
  • The opacity of the footer text changes to 50% opacity when moused over.

CSS3's opacity property works well in all modern browser versions but for Internet Explorer before version 9. For earlier versions of IE, we can use filter:alpha(opacity=xx);, where xx represents the desired opacity in percentage units (without the percent sign). We've used both the CSS3 opacity and the IE-specific filter:alpha in this demo to ensure our code works for a greater number of users.

Backgrounds

CSS3 offers the ability to include multiple background images for a given element - use a comma-delimited list to specify as many as you like:

background-image:url(img1.gif), url(img2.png), url(img3.gif)

The order of the listed background images determines the position of the layer relative to the viewer, akin to the CSS z-index property: the first background image is on "top", the next below that, etc.

In similar fasion, specifying a comma-delimited list of background-position and/or background-repeat values assigns the position and repeat, respectively, for the multiple background images, as such:

div {
						background-image:url(img1.gif), url(img2.png), url(img3.gif);
						background-position:center top, right top, center bottom;
						background-repeat:no-repeat, repeat-x, repeat-y;
					}

In the example above, background image img1.gif is positioned center top and not repeated, img2.png is positioned right top and repeated horizontally, and img3.gif is positioned center bottom and repeated vertically.

Excess position or repeat values are ignored; that is, for an element for which three background images are specified and for which, say, four background-position values are set, the fourth set of position values would be ignored. If too few position or repeat values (i.e., fewer than the number of background images) are set, then the position or repeat values are repeated.

Specifying background-color when applying multiple background images applies the color as the final (lowest) background layer, behind all of the background images.

The background shorthand property is still available with multiple background images:

div {
						background:url(img1.gif) center top no-repeat, url(img2.png) right top repeat-x, url(img3.gif) center bottom repeat-y;
					}

CSS3 introduces three new background-related properties: background-clip, background-origin, and background-size. background-clip allows us to specify the painting area of the background - whether the background extends into the element's border. Possible values are:

background-clip values
Value Description
border-box Clipped to the element's border box (default)
padding-box Clipped to the element's padding box
content-box Clipped to the element's content box

background-origin specifies the background positioning area; that is, relative to what aspect of the element should the background image be positioned. Possible values are:

background-origin values
Value Description
border-box Relative to the element's border box
padding-box Relative to the element's padding box (default)
content-box Relative to the element's content box

background-size specifies the size of background image(s); possible values are:

background-size values
Value Description
length Width and height specified in pixels or ems; e.g., 10px 20px
percentage Width and height specified in percentage relative to the background positioning element; e.g., 50% 20%
cover Scale the background image, preserving its aspect ratio, to the smallest size such that both width and height completely cover the background positioning area
contain Scale the background image, preserving its aspect ratio, to the largest size such that both width and its height fit inside the background positioning area

The following example illustrates the background-clip, background-origin, and background-size properties.

Code Sample:

CssBackgroundTricks/Demos/background-clip-origin-size.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>CSS3 background-clip</title>
	<style type="text/css">
		body {
			padding-left: 20px;
		}
		.bg {
			width: 250px;
			height: 150px;
			padding: 20px;
			margin-right: 20px;
			margin-bottom: 20px;
			float: left;
			background-color: #888;
			border: 10px dotted red;
			background-image: url('Images/chicago_small.jpg');
			background-repeat: no-repeat;
			color: #ff0;
		}
		div.bg:nth-child(2n + 1) {
			margin-right: 0;
		}
		div.bg code {
			background-color: rgba(0,0,0,0.45);
			padding: 3px;
			font-size: 14px;
			line-height: 20px;
		}
		#border {
			background-clip: border-box;
			background-origin: border-box;
		}
		#padding {
			background-clip: padding-box;
		}
		#content {
			background-clip: content-box;
		}
		#size {
			background-image: url('Images/chicago.jpg');
			background-origin: border-box;
			background-size: contain;
		}
		footer {
			clear: left;
		}
	</style>
</head>
<body>
	<div id="main">
		<h1>CSS3 <code>background-clip</code></h1>
		<div id="border" class="bg">
			<code>background-clip: border-box;</code>
			<br><code>background-origin: border-box;</code>
		</div>
		<div id="padding" class="bg">
			<code>background-clip: padding-box;</code>
		</div>
		<div id="content" class="bg">
			<code>background-clip: content-box;</code>
		</div>
		<div id="size" class="bg">
			<code>background-origin: border-box;</code>
			<br><code>background-size:contain;</code>
		</div>
		<footer>
			<p>Various <code>background-clip</code>, <code>background-origin</code>, and <code>background-size</code> examples</p>
		</footer>
	</div>
</body>
</html>

Code Explanation

The page presents four <div>s, each (including padding and border) 310px wide by 210px tall. Each <div> has a dotted red border, a dark-gray background, a not-repeated image background, and 20 pixels of padding:

background clip, position, size

The first (upper left) <div> specifies background-clip:border-box, which sets the background painting area to extend out to (under) the border, and background-origin:border-box, which positions the background image (the small photo of the Chicago skyline) relative to the edge of the border of the <div>.

The second (upper right) <div> specifies background-clip:padding-box - note that the gray background color extends up to, but does not sit under, the dotted border. Since it isn't specified, background-origin has here the default value padding-box; note that the background image is positioned up to (but not under) the border.

The third (lower left) <div> specifies background-clip:content-box, meaning that the background painting area does not extend into the <div>'s 20 pixels of padding.

Last, the fourth (lower right) <div> specifies background-origin:border-box, so that the background painting area extends up to (and under) the border of the <div>, and also background-size:contain, which sizes the background image as large as possible while still keeping it completely contained within the background painting area.

The next exercise asks you to put into use the concepts we've just reviewed.

Next