Skip to main content

Creating A Floating Background, Under The Posts

This blog started out using a Layout template, name "Minima". When I applied a Designer template, I selected the Designer equivalent of "Minima", name "Simple".

Long ago, I picked a template background - which looked slightly better than boring - for this blog. The blog looked fairly decent with the content text floating over the background, when viewed using a high resolution, full colour ("32 bit" palette) display.

Unfortunately, not everybody who views this blog uses a high resolution, 32 bit colour palette. During the past couple years, I have observed various comments published here, from people who did not find it easy reading the text, floating over the naked blog background.

Applying a floating content background, which you may see looking like a whitish haze floating just beneath this text, was not difficult - though it took some experimentation.

The "Picture Window" template includes a floating background, standard.
The Designer template, name "Picture Window", comes standard with this floating content background - though theirs is opaque, behind the posts (and somewhat boring looking).

Using "Picture Window" as a guide, I found the necessary code.

Looking at an existing blog which used the "Picture Window" template, I found the relevant CSS rule. As always, some of the code below contains gratuitous line breaks, which you will want to remove.

.main-outer {
background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
}

I wanted a little bit of control over the degree of transparency. A bit of searching the W3Schools website, and I found the right tutorial.

The CSS3 property for transparency is opacity.

And an example in the tutorial,

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Combining the two rules, and I soon had

.main-outer {
background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
opacity:0.40;
filter:alpha(opacity=40); /* For IE8 and earlier *
}

Adding the code is not difficult.

Adding the code to the template was easy enough - using the "Add CSS" menu option in Blogger Template Designer.

After a bit of experimentation with this blog background, I decided that 75% opacity looks best, for this blog. I may change my mind, from time to time, however.

.main-outer {
background: transparent url(http://www.blogblog.com/1kt/transparent/white80.png) repeat scroll top left;
opacity:0.75;
filter:alpha(opacity=75); /* For IE8 and earlier *
}

And, for 2/19/2016, I found a simpler equivalent.

.main-outer {
background: rgba(255, 255, 255, 0.60);
}

Depending upon your blog background, and your text colours, you may like more or less opacity. Other than the opacity decision, you'll find this tweak to be fairly straightforward.

You can add the background under different template sections.

Instead of adding a background under "main-outer", you could selectively add a background under any of the 3 sections of "main".

  • column-center-outer (only the posts).
  • column-left-outer (only the left sidebar).
  • column-right-outer (only the right sidebar).

These are the container names used in standard Blogger templates. If you are using a custom template, you may find other containers to specify.

Your blog is your choice - and this technique offers various choices.

Comments

Penny said…
Just the sort of info I've been wanting. Thanks, Nite!
Code Spoilers said…
I am using the css code to make my side bar and post container transparent but it making the gadgets fonts and pictures all transparent to. But I only want the background of these elements transparent not the text pictures and widgets on the blog how do I stop it from making these things transparent and just side bar and post background transparent.
Chuck Croll said…
Hey Spoilers,

Thanks for the question.

You can apply the background to any specific template section. I used "main-outer". "main-outer" has 3 sections.
- column-center-outer (only the posts).
- column-left-outer (only the left sidebar).
- column-right-outer (only the right sidebar).
There may be other template sections, too.

Popular posts from this blog

Custom Domain Migration - Managing The Traffic

Your blog depends upon traffic for its success.

Anything that affects the traffic to your blog, such as any change in the URL, affects the success of your blog. Publishing the blog to a custom domain, like renaming the blog, will affect traffic to your blog. The effects of the change will vary from blog to blog, because of the different traffic to every different blog.Followers. People who find your blog because of recommendations by other people.Search engines. Robotic processes which methodically surf your blog, and provide dynamic indexing to people who search for information.Subscribers. People who read your content from their newsfeed reader, such as the dashboard Reading List.Viewers. People who read your content from their browser.No two blogs are the same - and no two blogs will have the same combinations of traffic sources.

Stats Components Are Significant, In Their Own Context

One popular Stats related accessory, which displays pageview information to the public, is the "Popular Posts" gadget.

Popular Posts identifies from 1 to 10 of the most popular posts in the blog, by comparing Stats pageview counts. Optional parts of the display of each post are a snippet of text, and an ever popular thumbnail photo.

Like many Stats features, blog owners have found imaginative uses for "Popular Posts" - and overlook the limitations of the gadget. Both the dynamic nature of Stats, and the timing of the various pageview count recalculations, create confusion, when Popular Posts is examined.