How To Use Own Photo as Blog Background

How to add photo as Blogger blog background?
How to upload own photo to blog background?
How to change blog background to own photo?
How to modify Blogspot blog background to own photo?
How to put image as blog background?

Blogger in Draft's Template Designer now has a new feature which allows users to upload their own photos as background easily.

To do so, go to Dashboard > Design > Template Designer > Background.


Click on the "Background image" and you'll be able to see the "Upload image" feature. Click it and you'll be able to select the preferred picture as your blog's background.

According to Blogger in Draft blog, for images that fill the entire background, a resolution of 1800px wide and 1600px high is recommended and image size less than 200KB to minimize loading time of the blog. It support JPEG, GIF, and PNG format images.

At the end, additional background settings are available by using the Alignment, Repeat and Scroll options.

Tweet

How To Change Blogger Background

How to change blogger background?
How to change blog background?
How to change the colour of the background?
How to put image as background?
How to repeat the single image on the background?

Here's how.

First, go to your Edit HTML Template page.

Dashboard > Layout > Edit HTML
Then look for the body { ... } section, usually appear after the Variable Definitions.

body { background:$bgcolor; margin:0; color:$textcolor; font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif; font-size: small; text-align: center; }

It doesn't have to look exactly like that. As long as you found the body { } section.

Now to change the background, all you need to do is play around with the background: line.


Change Background Colour

background: #FFFFFF;

Just change the #FFFFFF to other hexadecimal colour value. #FFFFFF is white. For more colours, check them out here here.

Also, you can put the colour name if you want.

background: white;

However, for more variety of colours, you are recommended to use the hexadecimal colour code.


Add Background Image

First upload your background to the Internet - ImageShack, Photobucket or any of your favourite photo uploading sites. Then obtain the direct link to the picture.

background: url(LINK);

Just add the image URL to LINK and you're done. Also you can modify the positioning and location of the image.

Just add these code after the URL part.

Repeat the image horizontally (left to right):

repeat-x

Repeat the image vertically (top to bottom):

repeat-y

No image repeat:

no-repeat

Repeat both vertically and horizontally:

(don't put any "repeat" tag)

Position image to the left or right:

left (for left side) or right (for right side)

Position image to center of screen:

center

Fix image on background (to prevent image from moving when scrolling):

fixed

Now your complete background code may look like this:

background: #FFFFFF url(http://abc.com/image.jpg) repeat-x fixed;

So just play around and you'll understand it. Enjoy!

Tweet