SEO checklist

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

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

Post last updated:

Elaine Malone
Elaine Malone is a digital marketing strategist based in London, UK. She is the founder of XOmisse, a resource that helps new entrepreneurs, content creators and small business owners start, grow and monetise their online platforms. Elaine has over a decade of experience, is the former Creative Director and Head of Operations at bCreator, and has recently graduated with a Master of Science with Distinction in Digital Marketing Management from the University of Westminster. Along with running her business, she is a business and marketing lecturer at the University of West London.

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

  1. 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

      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

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

    2. Ellie M

      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

        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

          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

            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

            Awh thank you very much 🙂 x

  2. Emily

    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!!

Join over 1,000 creators and small biz owners and be part of The Roundup

Ready to build your website, grow your audience and monetise your platforms? Receive the latest WordPress news, social media updates, SEO tips and industry insights straight to your inbox.

By signing up you’ll receive our fortnightly newsletter and free resources. No spam or unnecessary emails. You can unsubscribe at any time.