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...

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...