BrianBehrend.com

As I start to use new CSS3 properties more often new issues are arising that I didn’t have to deal with before. Building out a new responsive site now that is using retina images for the mobile site so I’m using the background-size property extensively. I ran into a bug in Firefox 11 where in some situations the property was ignored.

Here’s an example of the code that did not work in Firefox:

112
113
114
115
116
117
118
119
120
121
122
123
124
125

.author:after {
	background-size: 30px 30px;
	content: "";
	height: 30px;
	padding: 0;
	position: absolute;
	right: -32px;
	top: 0;
	width: 30px;
}
 
.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top no-repeat;
}

Turns out, using the background shorthand was overwriting the size. Adding the background-size property to the more specific author declaration fixed the issue.

It looks like this is actually correct behavior according to the spec. Using the shorthand overwrites all other background properties. From the Standarista site’s notes on CSS3 background properties:

If you use the background shorthand and fail to declare any of the individual properties that make up the shorthand, those properties will revert to their default values [...].

I thought it was time to learn the more detailed background shorthand that includes the new properties like background-size and background-clip. However, the W3C’s spec for it isn’t actually supported by seemingly any browsers yet. Here’s what the new shorthand declaration of the code should be:

123
124
125

.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top / 30px 30px no-repeat;
}

Unfortunately, that valid line of CSS breaks in every browser I tried it on and results in the image not displaying at all. I ended up needing to define the background-size property separately after the shorthand declaration:

123
124
125
126

.author-brian .author:after {
	background: url(/img/avatar-brian.png) right top no-repeat;
	background-size: 30px 30px;
}

The actual code will vary depending on what you’re doing but the important thing is to not forget to include the other background properties even if you’re not specifying them in your shorthand.

Tags: background, background-size, bugs, css, css3, firefox, images, retina