Hide Blur Images On Post Pages of Emporio Blogger Theme

By default, Emporio Blogger theme displays a blurred image on post pages as seen in the screenshot below :

You can hide the blurred image so it displays just your blog background image as seen in the screenshot below:

###So, How Do I Hide It?

  • Sign in to your Blogger dashboard at blogger.com
  • Navigate to “Theme” > “Customize” > “Advanced” > “Add CSS”

  • Copy and paste the code below into the box:
.bg-photo {
display : none;
}
  • Click “Apply to Blog”.

That’s all.

Recommended : How To Add Background Image To Emporio Blogger Theme

Update :

If white space still appears below header especially on mobile view after applying the css code above, you can try this trick published on Mazinoweb.

Look for the following codes in your blog html and delete them.

<b:if cond='data:view.isSingleItem'>
            <b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>
              <b:include data='{                                  image: data:widgets.Blog.first.posts.first.featuredImage,                                  selector: &quot;.bg-photo&quot;                                }' name='responsiveImageStyle'/>
              <div class='bg-photo-container'>
                <div class='bg-photo'/>
              </div>
            </b:if>
          </b:if>

Have fun!

3 Likes

And i finally removed it, thanks so much @jidetheblogger

1 Like

Thank you very much my mentor, it works for me.

Please I need information on you recharge card printing packages, some of my blog readers are interested

Send me private message here.

The Emporio theme is really cool, with the “follow-come” responsive design. However, the theme is a little bit heavy compared to the old blogger templates. Any idea on how to customize and remove unnecessary features of the theme will be much appreciated.

Thanks

Incredible! Super duper easy fix!!