Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » Set The Background In Blogger Dynamic View To Semi-transparent

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Set The Background In Blogger Dynamic View To Semi-transparent

Set The Background In Blogger Dynamic View To Semi-transparent

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error


This tutorial is a treat for everyone who’s using Blogger’s Dynamic View template. It’s a nice little trick shared by Yoboy of SouthernSpeakers and what it will show you is how you can render the default white background in Dynamic View semi transparent.

This can be a very helpful trick especially if you have an image background that you’d like to remain visible to your site’s visitors.
Here’s  how to get it done.

  • From your dashboard, go to Template section and then click on Customize
  • Click on Advanced, scroll down to the bottom and choose Add CSS
  • Paste the following CSS inside the Add custom CSS box (if you currently have some pre-existing CSS there, then paste it at the bottom)
.sidebar .item{
background: #E4E4E4 !important;
#items.items li.item, .overview-inner, .magazine #content, .ss .item, .mosaic #content .item, .sidebar #content, #sidebar .item.selected, .timeslide .item, .viewitem-content {
background: url('http://www.blogblog.com/1kt/transparent/white80.png') !important;
.overview-panel .article, .magazine #feature, .viewitem-panel .article, .sidebar #content .article{
background: transparent !important;
#overview .overview-backdrop{
opacity: 0 !important;
  • Click on Apply to Blog

Since Dynamic View’s Sidebar view doesn’t have a background by default, making your posts transparent won’t show you anything since there’s no background defined behind your posts. Below is a way to fix this.

  • Find out your background image’s location or URL by right-clicking on an empty space in Classic Dynamic View. If you’re using FireFox, simply choose View Background Image in the context menu.
  • You will then see your background opened in its direct link. Copy the URL in the address bar.
  • Now go back to your Blogger dashboard and then return to the Add custom CSS box.
  • Append the following code at the bottom of the CSS together with your background’s image (see sample below)
body.sidebar, #sidebar .items{
background: url('PUT_YOUR_IMAGE_BACKGROUNDS_URL_HERE') fixed center top !important;
  • Click on Apply to Blog and that’s it! You’ve done it.

Liked It ? Please Share


2 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. Gгeat aгtіcle! That is the κіnd of informаtion that аre mеаnt to be shareԁ arounԁ the nеt.
    Disgгаcе οn the sеaгch engines
    fοr nоt pоsіtionіng this put
    up uppеr! Cοme on ovеr and tаlk
    οver with my web ѕite . Thаnks =)

  2. Greetings from California! I’m bored to death at work so I decided to browse your blog on my iphone during lunch break. I love the info you present here and can’t wait to take a look when I get
    home. I’m surprised at how fast your blog loaded on my mobile .. I’m
    not even using WIFI, just 3G .. Anyhow, great blog!

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here