How to add a scalloped edge background to your blog

I’ve received quite a few questions about adding a scalloped edge to your blog since uploading this premade template to the shop. Todays tutorial will take you through how to add a scalloped edge (BG2) to the content area of your blog which sits on top of your blogs background (BG1) as shown below. Use the same technique to add lace details, triangles or other shapes to your blog content. Leave your link and show me what you come up with.

Heads up! This post is no longer being updated, so some details may be out of date.

[postwarning]

This works best when there is no gap between the main content and the sidebar, like with the Simple & Ethereal Blogger Templates.

1. 1. Once you have selected a Blogger Template that is suitable, go to Layout > Choose your preferred layout. Then go to Adjust widths > Change entire blog width. Take note of the width. Keep in mind that you do need to see part of the background in order for the scalloped edge to be visible.
   2. Now go to Advanced > Background > Main Background and make it Transparent.
   3. Follow this post to remove the shadow around the content area.
   4. Change the background of your blog which will be behind the scallop edge.
   5. Create an image similar to this one which is the same width as your entire blog width using PicMonkey, GIMP, Photoshop, etc. Export/save the image as a .png and upload it to an image hosting site such as Dropbox, Photobucket, Flickr.

1. Now go to Template > Customise > Advanced > Add CSS and paste the following code adding in your link
   

   /* scalloped background code */
   .content-outer{ background:url('DIRECT IMAGE URL HERE'); }

   
   
2. To remove the gap below the footer, go to Template > Edit HTML > Search for body {. Alter the padding value so that the third number is 0, like so
   

   before-

   
   

   body { padding: 0 40px 40px 40px; }

   
   

   or it could look like –

   
   

   body { padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
     $(body.background.override) }

   
   

   after –

   
   

   body { padding: 0 40px 0px 40px; }

   
   

   or

   
   

   body { padding: 0 $(content.shadow.spread) 0px $(content.shadow.spread);
     $(body.background.override) }