Adding a sidebar pattern that runs all the way to the end of the blog content has always been something I have struggled with when designing blog layouts in the past. So I thought I would share with you how I manage to do it on the 'simple' template and hopefully this should be of some assistance to you. Please bear in mind that I use the simple template which I have customised and edited myself. I can only really advise on this specific template as it is the one I am most familiar with. But by all means ping me an email if you are struggling and I will try to assist.
Firstly you are going to need to choose a background pattern. You need to be careful when choosing a pattern as some patterns are copyrighted which means that they may not be available for everyone to use. A good place to get simple backgrounds is www.subtlepatterns.com. Although they are not everyones cup of tea its a good place to start. Alternatively head to google and have a search of FREE background patterns.
Once you have selected your background pattern, upload it to a photosharing site. I use Photobucket, but you could also use Flickr or many of the other free hosting sites available. Once you have uploaded it should look something like this. The code which you will want is the direct code. Keep this open in a separate window and you can flick back and forth as you please.
Once you have chosen your background we can get onto adding it to your blog.
Go to your template and choose the Edit HTML section. Tick the box 'Expand Widget Templates' on the top left. Then BEFORE going any further download your entire template. You do not want to be making any changes which can't be rectified. I will usually copy the entire code and then paste into a word document and save. Then if I make any errors I can re-copy from word back into the HTML section to restore it back to normal. I can't stress the importance of this enough.
Once we have backed up/saved/saved again etc you get the drift we can move onto editing. You are going to search for the following piece of code >
}
.fauxcolumn-left-outer .fauxcolumn-inner {
border-right: 1px solid transparent;
}
.fauxcolumn-right-outer .fauxcolumn-inner {
border-left: 1px solid transparent; margin-left: 18px; margin-right: 0px;
}
A quick CTRL and F of .fauxcolumn-right should bring up the code you want. Note this is for those with a right sidebar those with a left use the .fauxcolumn-left code. Do everything the same just under the left one which is the top one in my HTML code for the simple template.
You are now going to add the following code underneath, directly before the } symbol. Edit the following area in red to your image URL (the direct link from Photobucket).
background-image:url(ADD THE DIRECT IMAGE LINK HERE);
background-attachment:fixed;
overflow: hidden;
}
It should look something like this >
Click preview and you should be left with a fixed sidebar background all the way to the end of your blog content. Something like this >
Let me know how you get on with this. I hope that I have explained it as clearly as possible yet if there are any areas that are not clear then drop me a note in the comment box below as it is open to amendments. Also please note that this has been done using the simple template on blogger. If you are using a different template then the codes may be slightly different. Feel free to ping me an email and I can always take a look.
.png)
.jpg)
