Creating A Floating Background, Nether The Posts

This spider web log started out using a Layout template, advert "Minima". When I applied a Designer template, I selected the Designer equivalent of "Minima", advert "Simple".

Long ago, I picked a template background - which looked slightly improve than wearisome - for this blog. The spider web log looked fairly decent amongst the content text floating over the background, when viewed using a high resolution, amount coloring cloth ("32 bit" palette) display.

Unfortunately, non everybody who views this spider web log uses a high resolution, 32 flake coloring cloth palette. During the by twosome years, I bring observed diverse comments published here, from people who did non divulge it tardily reading the text, floating over the naked spider web log background.

Applying a floating content background, which you lot may run into looking similar a whitish haze floating simply beneath this text, was non hard - though it took or in addition to then experimentation.

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

Using "Picture Window" every bit a guide, I flora the necessary code.

Looking at an existing spider web log which used the "Picture Window" template, I flora the relevant CSS rule. As always, or in addition to then of the code below contains gratuitous draw of piece of job breaks, which you lot volition desire to remove.

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

I wanted a picayune flake of command over the score of transparency. Influenza A virus subtype H5N1 flake of searching the W3Schools website, in addition to I flora the correct tutorial.

The CSS3 holding for transparency is opacity.

And an event inwards the tutorial,

img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 in addition to before */ } 

Combining the 2 rules, in addition to I before long had

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

Adding the code is non difficult.

Adding the code to the template was tardily plenty - using the "Add CSS" card option inwards Blogger Template Designer.

After a flake of experimentation amongst this spider web log background, I decided that 75% opacity looks best, for this blog. I may modify my mind, from fourth dimension to time, however.

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

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

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

Depending upon your spider web log background, in addition to your text colours, you lot may similar to a greater extent than or less opacity. Other than the opacity decision, you'll divulge this tweak to last fairly straightforward.

You tin laissez passer on notice add together the background nether unlike template sections.

Instead of adding a background nether "main-outer", you lot could selectively add together a background nether whatever of the iii sections of "main".

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

These are the container names used inwards touchstone Blogger templates. If you lot are using a custom template, you lot may divulge other containers to specify.

Your spider web log is your alternative - in addition to this technique offers diverse choices.

Share this post