Add a background image to Emporio

Emporio currently doesn't have support for a background image, though it does have a background image variable. Very similar to the instructions for making the Simple theme's background responsive, the following gadget will change that.
  • Click the button below, and add the gadget.
  • Head to Theme => Customize => Background
  • Select a background, apply, view the blog.

NOTE: Changes won't show up in the Template designer/customizer, but hitting apply will set the background!


The gadget contains the following custom markup.
<b:includable id='main'>
  <style>
    /* Hide this gadget. */
    #<data:widget.instanceId /> { display: none; }
  </style>
  <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: ".page_body"
                     }' />
  </b:if>
</b:includable>


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. Hello is there any way to prevent this?
    http://i.imgur.com/rMd5rMN.png

    ReplyDelete
    Replies
    1. You'd need some custom CSS, maybe something like
      .page_body { background-size: cover; background-position: fixed; }
      (Add it at Theme => Customize => Advanced => Add CSS)

      Note that those styles might need to me marked !important to take precedence.

      Hope that helps.

      Delete
  2. Thank you this helped me add the background I want but I am having issues with the columns on the Emporio theme. Could you help me on that: https://productforums.google.com/forum/#!topic/blogger/sJrrYoQQ-io

    ReplyDelete
    Replies
    1. Also do you know how to change the image on the individual post page. THe emporio theme seems to use the image from the post but I would like it to use one image I choose for all posts.

      Delete
  3. I loved emporio template, the new theme from blogspot

    Can you give us tutorial for edit this template because new template codes is more difficult for me than the old one. Example : I wanna create page and show my label of content, or add adsense on the bottom of article. For me it's hard.

    Can you help me to customize, or give pdf tutorial or video like http://www.truthinshredding.com/.

    I'm sorry if i put address, but that was not mine. surely.

    My new site is http://sketsaka.blogspot.co.id/, but can't customize like the first one.

    ReplyDelete
  4. Nice tutorial. but i need to remove the image on the top head of every post. like when you click a post, the image will appear at top. take a look and check here http://www.talkonpoints.com

    ReplyDelete
  5. Am not getting how to change my background photo on emperio template with custom image

    The custom image I uploaded is blur

    My blog @ Science'n'Tech Blog

    ReplyDelete

Post a Comment

Popular posts from this blog

Remove the header image for posts in Emporio

Rotate my Blogger images

Add snippets to the Emporio theme