Blogger has recently customized the templates in such a way that images are displayed with a default border and shadow. But what if you want to blend images with the posts background?
1. Log in to your blogger account
2. Go to Template -> Click Edit HTML and then Proceed.
3. Find the following code using Ctrl+F:
4. Replace the above code with the following:
5. You can preview the template before saving. If you are happy with the changes - Click Save.
Steps to remove the image border and shadow:
1. Log in to your blogger account
2. Go to Template -> Click Edit HTML and then Proceed.
3. Find the following code using Ctrl+F:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 8px;
background: $(image.background.color);
border: 1px solid $(image.border.color);
-moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
4. Replace the above code with the following:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: 0px;
background: transparent;
border: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
5. You can preview the template before saving. If you are happy with the changes - Click Save.