Wednesday, May 09, 2012

Creating A Floating Background, To Make The Blog Content More Readable

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(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 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 *
}
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.

>> Top

1 comment:

Penny said...

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