Background graphic for blog

I would be very careful with adding a graphic background to a blog as the photo must be selected carefully, otherwise, something on the blog become very hard to read or may even become invisible. Anyway look at blog with repeating graphic background.

Instructions on how to add a repeating graphic background to a blog

I would first assume you have a graphic or photo that will suit color of the text, hyperlinks, etc. Save it into your computer into a folder where it can be easily found. Now you have a choice of the free Photobucket image host or hosting it by uploading to a post in Blogger. In my case, I have chosen to host the photo at photo of clouds for blog background.

The very first thing you need to do is to get the correct photo URL. In that post, I will click View > Page source (the language may differ a little in different web browsers) in the menu bar at the top of the web browser:



Since the title of the post is "Photo of clouds for blog background", I will press ctrl+F and a search box will appear. I copy-paste all or part of the above post title and click "Find Next" to get to the section of the Page Source where the scripts to display the post is. I found:

<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwav-rKO1gTXKgD2py1yiLm59532fCuFEX3iYGYlmYE0WvQSAMLiaddrL-CvOU5jTIPQQ_OLF9Cgbw7Qpc8Z2sLSWqRUeH0CRzX7iBqCk9JJxZP5pmpoYnBJd0QepobjrXmpM-EsSXuMKf/s400/cloud+ktratboy+cropped.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5183480981056349650" />

and after src=" I found the URL of the photo:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwav-rKO1gTXKgD2py1yiLm59532fCuFEX3iYGYlmYE0WvQSAMLiaddrL-CvOU5jTIPQQ_OLF9Cgbw7Qpc8Z2sLSWqRUeH0CRzX7iBqCk9JJxZP5pmpoYnBJd0QepobjrXmpM-EsSXuMKf/s400/cloud+ktratboy+cropped.jpg

I then go back to blog with repeating graphic background (this is best done in a different tab of a web browser while signed into Blogger like FireFox with tabbed browsing. At the top of that blog, you will see the navbar with your email address, "New Post", "Customize", "Sign out".



Clicking on "Customize will take you to the LAYOUT. Click EDIT HTML and that will open the template editor window. Look for

---

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

---

and somewhere after {body

create some space for the script to add the graphic background which should be

background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwav-rKO1gTXKgD2py1yiLm59532fCuFEX3iYGYlmYE0WvQSAMLiaddrL-CvOU5jTIPQQ_OLF9Cgbw7Qpc8Z2sLSWqRUeH0CRzX7iBqCk9JJxZP5pmpoYnBJd0QepobjrXmpM-EsSXuMKf/s400/cloud+ktratboy+cropped.jpg');
background-repeat: repeat

and then that part of the template will become

body {
background:$bgcolor;

background-image:
url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwav-rKO1gTXKgD2py1yiLm59532fCuFEX3iYGYlmYE0WvQSAMLiaddrL-CvOU5jTIPQQ_OLF9Cgbw7Qpc8Z2sLSWqRUeH0CRzX7iBqCk9JJxZP5pmpoYnBJd0QepobjrXmpM-EsSXuMKf/s400/cloud+ktratboy+cropped.jpg');
background-repeat: repeat

margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}