Make my background image responsive

Blogger's got a nice selection of backgrounds to choose from when you're customizing your template. Recently, they made some changes to make them responsive.

If you don't know what I mean by responsive, try reducing the size of your browser window, and you'll see the background of this blog re-requested as a smaller version of the background image).

This actually has a massive impact on bandwidth for your readers. Take, for example, the background of this blog:


For anyone who has forked (customized) their template, though, the change may not been applied. If you've customized your template, using 'Edit HTML' on the template tab, but are still using the Blogger backgrounds, you should also add the following snippet to your template at the end of your <head> tag:


<b:if cond='data:skin.vars.body_background.image'>
  <b:include name='responsiveImageStyle'
             cond='not data:view.isPreview'
             data='{
                     image: data:skin.vars.body_background.image,
                     selector: "body"
                   }' />
</b:if>


Note that the selector can be adapted to suit the way that your template's skin defines the background (e.g. in this template, the selector is ".bg_photo" instead.)

Happy templating!

Comments

  1. how did you enter share icon to the right of the post? thank you

    ReplyDelete

Post a Comment

Popular posts from this blog

Get Facebook to show feature image for your Blog's Homepage

Get nicer thumbnails for my Post snippets