Multi serve background images

[iandberg]

Hi, - thanks for the handy code. I'm wanting to multiserve different background images, as in your 'Multi-serve Images' example, with the breakpoints options. This works, but was concerned about the 'obsolete' note. I couldn't get background images to work with the newer data-srcset notation. Thanks for any info - sorry if this was covered before. Ian

[ghost]

Hello, I tried this too, without success. Have a nice day

[dinbror]

Hey @iandberg and @alan-ergopix

Do you have a live example? Maybe I'm misunderstanding you but srcset is not supported for background images. Please elaborate :)

[iandberg]

Hi - no worries. Was just looking for a way to lazy-load responsive background images. Basically multi-serve with background images. I ended up writing something for myself but without the lazy aspect. Works for now. Any examples or tricks to lazy-load multi-serve background images? Thanks!

[alanpilloud]

I ended up using the same four div, hiding/displaying each one with bootstrap's visibility class. Not super clean, but it does the job.

Thanks !

[stueja]

maybe @iandberg uses it like I do (the {{placeholders}} are for grow.io)

<div class="bg b-lazy"
         data-src="{{g.static('/source/img/test/stuehler.coach.b.w1980.jpg').url.path}}"
         data-32="{{g.static('/source/img/test/stuehler.coach.b.w320.jpg').url.path}}"
         data-76="{{g.static('/source/img/test/stuehler.coach.b.w768.jpg').url.path}}"
         data-10="{{g.static('/source/img/test/stuehler.coach.b.w1024.jpg').url.path}}">HIER SOLLTE EIN BOOT SEIN</div>

My problem is, that the image does not appear at all, no matter which resolution, despite the following js:

UPDATE: indeed the image loads, but only when scrolling at a certain speed. Scrolling slowly will not reveal the image, scrolling fast will. Any ideas?

            (function() {
               // Initialize
               var bLazy = new Blazy({
                    offset: 100,
                    loadInvisible: true,
                    breakpoints: [{
                         width: 320 // max-width -- BIS 320px
                         , src: 'data-32'
                         }
                         , {
                         width: 768 // max-width
                         , src: 'data-76'
                         }
                         , {
                         width: 1024 // max-width
                         , src: 'data-10'
                         }                       
                         ]
                     });
            })();

with an additional css class .bg:

.bg {
  /* Background image is centered vertically and horizontally at all times */
  background-position: center center; /* auch: 50px, 50%, 50em

  /* Background image doesn't tile */
  background-repeat: no-repeat;

  /* Background image is fixed in the viewport so that it doesn't move when 
     the content's height is greater than the image's height */
  background-attachment: fixed;

  /* This is what makes the background image rescale based
     on the container's size */
  background-size: cover;

  /* Set a background color that will be displayed
     while the background image is loading */
  background-color: #464646;
}

[dinbror]

hey @stueja

Do you reserve space for the images (also ensures that the document wont have to repaint all the time)? Do you have a live example?

[dinbror]

I'll keep the multi image feature. Didn't' knew so many were using it