Yuika/partials/header-background.hbs

{{!--
Wow what the hell is going on in here even?

Ok so, several templates use this big header with a giant BG image. Nice idea, but big images
have a heavy impact on performance, so it's a good idea to make them responsive. Because we
can only get the image dynamically using Handlebars, and we can only set the image to properly
be a background image using CSS, we end up with a handful of inline styles.

If the template in question has a background image, then we render responsive image styles
for it, and apply those styles to the <header> tag. Else, we just output a <header> tag
        with a `no-image` class so we can style it accordingly.
        --}}

        {{#if background}}

        <style type="text/css">
            .responsive-header-img {
                background-image: url({{img_url background size='xl'}});
                background-size: cover;
                background-position: center;
            }

            @media(max-width: 1000px) {
                .responsive-header-img {
                    background-image: url({{img_url background size='l'}});
                    background-image: -webkit-image-set(url({{img_url background size='l'}}) 1x,
                        url({{img_url background size='xl'}}) 2x);
                    background-image: image-set(url({{img_url background size='l'}}) 1x,
                        url({{img_url background size='xl'}}) 2x);
                }
            }

            @media(max-width: 600px) {
                .responsive-header-img {
                    background-image: url({{img_url background size='m'}});
                    background-image: -webkit-image-set(url({{img_url background size='m'}}) 1x,
                        url({{img_url background size='l'}}) 2x);
                    background-image: image-set(url({{img_url background size='m'}}) 1x,
                        url({{img_url background size='l'}}) 2x);
                }
            }
        </style>

        {{else}}


        {{/if}}