Wednesday, May 09, 2012

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 Designer template, name "Picture Window", comes standard with this floating content background - though theirs is opaque, behind the posts (and somewhat boring looking).

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( 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,
filter:alpha(opacity=40); /* For IE8 and earlier */
Combining the two rules, and I soon had
.main-outer {
background: transparent url( repeat scroll top left;
filter:alpha(opacity=40); /* For IE8 and earlier *
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( repeat scroll top left;
filter:alpha(opacity=75); /* For IE8 and earlier *
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.

Dude, hit me with a comment!

Penny said...

Just the sort of info I've been wanting. Thanks, Nite!