How to add a scalloped edge background to your blog

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.

scalloped-edge-example

[postwarning]

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

  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.
  6. scalloped edge background in blogger

  7. 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'); }
  8. 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) }

Related posts

GIMP Video and Text Tutorials
Backup your Entire Blog – Posts, Design and Photos
Remove Borders and Shadows from Blog
Scallop Edge Premade Design Template for Blogger
Search and Find Code in Blogger

Elaine Malone avatar

Join 1,000+ creators and small biz owners as part of The Roundup ⚡️

The latest insights + practical marketing tips straight to your inbox.

No spam or unnecessary emails. You can unsubscribe at any time.

9 responses to “How to add a scalloped edge background to your blog”

  1. Jana avatar
    Jana

    I followed the instructions and the scallop is not showing up on the right side of the content area. It’s also not tiling properly. 🙁 Any idea how I can fix that?

    See what I mean?

    Thanks Ellie!

    1. Jana avatar
      Jana

      Nevermind! I actually figured it out–turns out all I had to do was change the blog width. 🙂
      Thanks for the great tutorial!

      1. Ellie M avatar

        Oh! Perfect 🙂 no problem, glad you got it working x

    2. Ellie M avatar

      Hello, make sure your blog width and scallop edge image width are the same. You may need to adjust the size of your blog for it to fit properly 🙂 x

      1. Jana avatar
        Jana

        Sorry to bother again! I just noticed there is a little space near the foot of the blog where the image repeats. It will become a problem when the post area has more posts. Is there a way to remove the gap between the image tiles so it is seamless vertically?

        1. Ellie M avatar

          Hello. That’s due to the image – there’s a space in between each scallop, but no space on the top or bottom of the image so when it repeats it’s joining them together. Does that make sense? I recommend creating an image similar to that shown above, with only 3 scallops and making sure it tiles properly. That way it’s a smaller file to load too 🙂

          1. Jana avatar
            Jana

            Problem solved! Thank you. 🙂 I really appreciate first off that you write these tutorials, but secondly that you actually take the time to help people who are having issues. It’s very kind of you. You rock! 🙂

          2. Ellie M avatar

            Awh thank you very much 🙂 x

  2. Emily avatar

    For Blogger I created my image on PicMonkey and saved it. Then I just uploaded it to the background image, top-center aligned it and then vertically tiled it!! I couldn’t get the code to work but this did!!