How to Add a Background Image to Blogger
Since the new template designer came out some years back, adding a background image to Blogger is no longer a template customization anymore. You can now add a background that either scrolls with your blog posts or remains fixed in the background (my preferred setting).
The key consideration is that your image should be large to fit to most screen sizes on monitors especially if you want it to cover the full width of many different types of displays. It is not enough anymore to focus on 1024 by 768 screens when large HD monitors can now have resolutions much higher such as 1920 by 1080.
The steps are very easy and I'll lead you through it.
First step is to get yourself into the Blogger template design by selecting the Templatemenu from the Blogger main menu and then selecting the Customize button as shown in the diagram below:
Once you've selected the customize button you should see theBlogger Template Designermenu:
Select the Background menu item on the left that I circled above. This will take you to the default background image positioning dialog for your blog. To actually add an image, click on the little down arrow just to the right of the blank white image:
At this point the background image dialog appears and you now have the option of adding some pre-built backgrounds offered by Blogger, or, you can upload your own image from your personal set of photos, graphics or illustrations.
To select your own image choose the Upload image menu option shown here:
The upload browse selection will appear - choose to Browse... you own file system :
For this example I found a cityscape photo in my Pictures directory of my laptop. Once selected and uploaded, Blogger shows you a snapshot of the background image like this:
Your own image is now ready to be used as your Blogger blog's background. If you don't like your first choice, just go back and pick another image. Be sure to click on the orange Done button once you find your best image.
At this point you'll be back in the Blogger Template Designer background imagemenu. Here is where you can set the properties of your image. The key settings to note are the Alignment which allows you to set the image to the left, right, top, bottom, etc and if the image will be tiled (meaning, the image will be repeated left-right, top-bottom if the screen is very large:
My preferred settings are to align the image in the center, tile it for very large screen and to turn off the Scroll with page so that the background stays fixed while the user scrolls through your blog posts like so:
There you have it - a background image for your blog! Don't forget to hit the Apply to Blog button in the upper right of the screen before you leave the page with the << Back to Blogger selection:
Remember, with your background image you should try to find as large a picture as possible that will fill a 1920 by 1080 screen. If not, something that looks good as a repeatable pattern works too. Also, if you don't tile your image, then on very large screens the picture will have white borders which looks a bit odd (especially on a something like a large Mac screen).
Note - there does seem to be an issue with Blogger for some larger images not showing up in the background. Just be aware to choose another image or scale your image down if necessary.
The key consideration is that your image should be large to fit to most screen sizes on monitors especially if you want it to cover the full width of many different types of displays. It is not enough anymore to focus on 1024 by 768 screens when large HD monitors can now have resolutions much higher such as 1920 by 1080.
The steps are very easy and I'll lead you through it.
Using the Blogger Template Designer
First step is to get yourself into the Blogger template design by selecting the Templatemenu from the Blogger main menu and then selecting the Customize button as shown in the diagram below:
Select the Background menu item on the left that I circled above. This will take you to the default background image positioning dialog for your blog. To actually add an image, click on the little down arrow just to the right of the blank white image:
At this point the background image dialog appears and you now have the option of adding some pre-built backgrounds offered by Blogger, or, you can upload your own image from your personal set of photos, graphics or illustrations.
Uploading Your Own Blogger Background Image
To select your own image choose the Upload image menu option shown here:
The upload browse selection will appear - choose to Browse... you own file system :
For this example I found a cityscape photo in my Pictures directory of my laptop. Once selected and uploaded, Blogger shows you a snapshot of the background image like this:
Setting the Background Properties
At this point you'll be back in the Blogger Template Designer background imagemenu. Here is where you can set the properties of your image. The key settings to note are the Alignment which allows you to set the image to the left, right, top, bottom, etc and if the image will be tiled (meaning, the image will be repeated left-right, top-bottom if the screen is very large:
My preferred settings are to align the image in the center, tile it for very large screen and to turn off the Scroll with page so that the background stays fixed while the user scrolls through your blog posts like so:
There you have it - a background image for your blog! Don't forget to hit the Apply to Blog button in the upper right of the screen before you leave the page with the << Back to Blogger selection:
Remember, with your background image you should try to find as large a picture as possible that will fill a 1920 by 1080 screen. If not, something that looks good as a repeatable pattern works too. Also, if you don't tile your image, then on very large screens the picture will have white borders which looks a bit odd (especially on a something like a large Mac screen).
Note - there does seem to be an issue with Blogger for some larger images not showing up in the background. Just be aware to choose another image or scale your image down if necessary.
No comments:
Post a Comment