September 2016

Viewing posts from September , 2016

Adaptive Backgrounds Color – picture element support

About a year ago we used a brilliant plugin Adaptive Backgrounds (http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/) on one of our projects – OceanWide Expeditions (http://www.oceanwide-expeditions.com/)

Site’s header on pages with hero images is semi-opaque. The script adds slight colored gradient so the page has nicer look and better header links readibility.

It was a great experience to use Adaptive Images on a container with background-image property. But with time past we needed to provide support for <picture> element.

Plugin didn’t support this element, as was searching only for background-image property. The other way it assumes that we have <img> element.

There’s no sense to add “background-image” property to <picture>, as we add one more useless big (remember it is a background for hero image) request on our page.

So, I read a bit further about <picture> , and how it deals with its <img> children.

Adaptive Images is based on RGBaster plugin, that takes <img> or full image URL as argument.

So we had a chance to use it with <picture>. How do we get image from <picture> element?

Its child <img> has an attribute currentSrc for active image from your <source> set. This property is not supported in Safari and IE (https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement#Browser_compatibility)

Keeping this in mind, we create following image definition replacement for Adaptive Backgrounds script jquery.adaptive-backgrounds.js (line 51):

That’s all. Feel free to clone my fork from https://github.com/IgorUsoltsev/jquery.adaptive-backgrounds.js or maybe one day Adaptive Backgrounds authors would merge it into main repo.

NOTE: your <picture> element is required to have at least 1 <img> (it is the only valid markup for this element but still)