How to choose a good Background for your Blog #3

{Read in Italian...}
how to choose a good background for your blog 3
Hello! Let's go further with our lessons about blog background.
We've already had an introduction and we talked about solid colors and patterns, so today we can see what to do to have a stretchable image that fits our whole browser window as background, without repeating itself or leaving blank areas.
Here's an example:
how to choos a good backgroud for our blog 3
I'm not a Wordpress expert right now, so I'm going to explain the steps of the process through Blogger user interface, but of course the CSS code is OK for any blog-publishing service.

You're going to need a good, optimized image. It must be lightweight (try not to get past 300 Kb), keeping an acceptable quality (it doesn't have to be blurry or noisy) and with a correct aspect ratio (so that it won't be deformed when stretched to fit your browser window).
Blogger's advice is to use something 1800x1600 px, which is a good compromise to fit an average resolution.
You can get to a good result quite easily if you have a little confidence with any photo editing software.

General rule for digital images: never, ever, ever try to enlarge a small image!

If we get a nice, optimized image for our purpose, we can go further, but first of all backup your template!

My advice is to open a second blog for testing purpose, so you can try and try again until you get what you want, without messing with your public blog.
For my example I used one of Blogger Travel templates, which comes with a semi-tansparent content background: this way our image can stand out, without impairing readability.

First, you have to upload your image, so that you can get a direct URL. You can do it through image hosting websites like Photobucket, or you can upload it on a post from your own blog, without publishing it, just saving (this is the method I personally use).
Just do as you prefer and get an URL.

Now, from Blogger interface go to Template → Customize → Advanced → Add CSS.
Copy and paste this code:
html, body {
background: url('background.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Replace 'background.jpg' with the link to your image and click on "Apply to Blog".

That's it!

Warning: people still using obsolete browsers, like Internet Explorer 6-7, may not see your background correctly: these browsers don't support these CSS features!
The choice to risk to have a couple of potential readers not seeing your background properly is up to you.
Anyway, let me know if you encounter any problem...

More:
1. General rules.
2. Solid colors and pattern dos and don'ts.
4. Implementation.

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...