Coding error in HTML5 & CSS3 for the Real World?

I just bought Sitepoint’s HTML5 & CSS3 for the Real World book and it’s wonderful. However, in one part of the code for the practice page is an <article id=#ad2> that is suppose to have a bicycle rolling off the page via a transition property. According to the book, it’s supported by Opera. With the book’s code loaded in Dreamweaver CS5 and viewed in Opera 11.11, the bg-bike.png in “ad2” does not roll off the page as it does in all the other browsers. Instead, when my cursor moves over it, it just disappears. Here’s the relevant code that I have loaded in Dreamweaver for the <article> (, or you can go to The HTML5 Herald in Opera to see what I mean:

#ad2 {
height: 170px;
background-image:
url(…/images/bg-bike.png),
url(…/images/gradient.svg);

/* …All the gradient properties removed for this example */

background-position: 50% 88%, 0 0;
-webkit-transition: background-position 1s linear 250ms;
-moz-transition: background-position 1s linear 250ms;
-o-transition: background-position 1s linear 250ms;
transition: background-position 1s linear 250ms;
}

My question is: Is this an error in the book or is it a problem
with Opera 11.11?

Thanks for your assistance (and a great book!).

Katie Bradshaw

Hi,

Opera doesn’t support transitions on the background image property. I guess it was overlooked in the book.

Thanks, Paul. I just received this response from the Sitepoint Technical Editor, who says the same thing:

"Opera does support transitions, but for some reason doesn’t support transitioning the background-position property specifically. Because the bike animation isn’t actually mentioned in the book, but more of an “easter egg” when viewing the sample site, I decided to leave it in there despite it being slightly broken in Opera. This is partly because Opera’s user base is very small, and also partly because it’s very likely that support for this will be added in the near future.

Hope that helps,

Louis Simoneau
Technical Editor"

Yes it can be hard to keep track when only some things are supported among various browsers which of course is the problem with vendor extensions as they are not a complete spec yet. Fun to play with but not to rely on :slight_smile:

<article id=#ad2> why do you have the # sign there?

That’s just a typo in the thread I would suspect as the original doesn’t have the same error.:wink: