Responsive background images

Question

Currently I'm working on building a solution for having responsive background images set via JavaScript. I am using Picturefill to create cross-browser support.

What do I need? There is an element on my page which needs a pretty little background photo. On the page there is a picture element which loads conditionally images. However I specified one default image source if the browser doesn't have proper picture element support.

With MooTools I check what photo is supposed to show up on domready, on window resize I check my image 'src' again to replace my current picture if needed (with a bigger or smaller one).

In FireFox the picture element replaces the image 'src' in the DOM, it works perfect!

Chrome (and IE) don't replace the image 'src' so my photo will always have the default photo dimensions according to MooTools. However, when you hover over the image 'src' via the Chrome developer tools it does show the correct image source for that media query.

I can get in way too many details but trust me I really need to do it like mentioned above, who want to help me with this? :)

<script>
    var Placeholder = $('Placeholder');

    var CoverImage = $('MyCover').getElement('img').src;

    Placeholder.setStyle('background-image', 'url(' + CoverImage + ')');

    var $timer = null;

    window.addEvent('resize', function(){

        var ResponsiveImage = function(){

            var $ResponsiveImage = $('MyCover').getElement('img').src;

            $('Placeholder').setStyle('background-image', 'url(' + $ResponsiveImage + ')');
        };

        clearTimeout($timer);
        $timer = ResponsiveImage.delay(250, this);
    });
</script>

<picture>
    <source media="all and (max-width: 30em)" srcset="1.jpg">
    <source media="all and (min-width: 30.063em) and (max-width: 48em)" srcset="2.jpg">
    <source media="all and (min-width: 48.063em) and (max-width: 80em)" srcset="3.jpg">
    <source media="all and (min-width: 80.063em)" srcset="4.jpg">

    <img src="2.jpg">
</picture>

Thanks for the possible solutions, I am very grateful!

Cheers, Stefan

Could you add a jsFiddle to this question? then we can help you better. I think the `picture` element [is not supported in FF or IE yet...](http://caniuse.com/#search=picture) can you not do that with `img` elements? — Sergio, Feb 12 '15 at 10:29

score 0 · Answer 1 · answered Feb 12 '15 at 09:51

0

Perhaps I don't understand exactly what you are trying to do, but instead of trying to use the script to control the dimensions why not use the CSS property background-size: cover; instead? That is what I always use for responsive background images not that it is widely supported by browsers.

answered Feb 12 '15 at 09:51

skribe

3,595
4
25
36

I just want to load different images dependent on the media query. It's an image quality issue, I do use cover but I want to be a bit more accurate with my image dimensions so it looks better depending on the media query. – Stefan Klokgieters Feb 12 '15 at 09:57

score 0 · Answer 2 · answered Feb 12 '15 at 09:51

0

You should really look at http://foundation.zurb.com/docs/components/interchange.html.

Maybe you can get the script and adapt it to your case?

answered Feb 12 '15 at 09:51

Adysone

121
1
8

It looks fine but my preference is to use complete and valid HTML, I will keep this in mind for sure. Thanks! – Stefan Klokgieters Feb 12 '15 at 09:58
I think it is valid HTML5. – Adysone Feb 12 '15 at 11:07

alexander farkas · Answer 3 · 2015-02-15T16:41:56.770

0

First of all your markup:

In picture land you don't need to use min-width and max-width. The first source, that matches is the media query is used:

<picture><source media="(max-width: 30em)" srcset="1.jpg">
<source media="(max-width: 48em)" srcset="2.jpg">
<source media="(max-width: 80em)" srcset="3.jpg">
<source srcset="4.jpg">
<img src="2.jpg"></picture>

Now, what you need is actually the property currentSrc, but be aware it needs to be handled different than the src property, because it is updated, after the image is loaded (so don't use resize, use load).

Fortunately there is already a simple lazySizes plugin called bgset, that does exactly what you need. Here you find a demo and here you find the documentation. Of course you can also check out the source code and build your own.

In case you want to use the plugin your markup changes to something like this:

<div class="lazyload" data-bgset="1.jpg [(max-width: 30em)] | 2.jpg [(max-width: 48em)] | 3.jpg [(max-width: 80em)] | 4.jpg"></div>

edited Feb 15 '15 at 16:41

answered Feb 14 '15 at 15:28

alexander farkas

13,754
4
40
41

First off all thanks for your input! I always thought that currentSrc was only ment for video and audio usage. Do you have an example for me regarding images? Because then this would be my solution! :) About my mark-up, I know you can write it differently but my mark-up seen like above is intended, but thanks for the adivce anyway! Thanks for taking time to give me some pointers/ directions. Cheers, Stefan – Stefan Klokgieters Feb 15 '15 at 15:56
Simply just look into the generated DOM of the demo above. You will see that the script is generating this picture/img markup (as display none child of the div element). As also how the script is using currentSrc: https://github.com/aFarkas/lazysizes/blob/gh-pages/plugins/bgset/ls.bgset.js#L72-L75 – alexander farkas Feb 15 '15 at 16:36

score 0 · Accepted Answer · answered Feb 19 '15 at 10:11

0

I am using the currentSrc property to get the updated image source and it works like a charm! Thanks everyone for the help!

answered Feb 19 '15 at 10:11

Stefan Klokgieters

51
1
6

Responsive background images

4 Answers4