How to Create a Custom Blog Background in Picmonkey

SomethingSwanky is reader-supported. When you buy through links on our site, we may earn an affiliate commission at no extra cost to you.

How to Create a Custom Blog Background using #picmonkey

I’ve received numerous requests to put together a tutorial on backgrounds, so today’s the day!

Here’s the deal with blog backgrounds: they are super, duper, crazy important. Why? Don’t I always say that the header is most important? That it’s what people see first?

Ok, yes. The header is first and foremost. But NOTHING messes up a good header like an awful background. And a background can be awful in all sorts of ways… If you’re a blogger, I’m sure you’ve found yourself guilty of one of these background grievances as some point or another (or even now!):

  • You have a cute background from a site that provides free backgrounds! Their watermark image is on your blog. Oh, and 15 million other people also have that background. Not good.
  • You are using a Blogger or WP provided background. Not good.
  • You attempted a custom background, but you were too afraid to mess around with any other settings. So you have an overlapping or squished sidebar/header. Not good.
  • You have no background. (This actually isn’t the worst scenario in the world… but why settle?!)

I have done ALL OF THESE THINGS! Which is why I’m bold enough to list them. I promise– this isn’t me being mean if you have one of those background situations. This is me saying, “it doesn’t have to be that way!” You can have a gorgeous, custom background that looks exactly the way you want it to look!

It’s not even hard!! At the worst, it could be a little time consuming– but that all depends on what you make of it 🙂 .

Time to get started!

For basics on using Picmonkey, see this post first.

Step 1: Open Picmonkey.com and proceed to white wash any photo and re-size it to approximately 2000 pixels x 1400 pixels.

How to Create a Custom Blog Background using #picmonkey

Create a Custom Blog Background using #picmonkey

How to Create a Custom Blog Background in #picmonkey

Don’t forget to merge your layers using the icon that looks like this:

Screen Shot 2013-01-30 at 10.34.56 PM

Step 2: Since our background is nothing more than an image that will display “behind” the blog, I like to create mine with a white center. It helps me to better see the parameters of the blog and allows me to add cute borders! So to create the white center, add the left and right sides using the rectangle overlay. Go ahead and adjust the color to your primary color.

How to Create a Custom Blog Background using #picmonkey

Ok… everyone may find they have a different method here. You can get all mathematical and actually calculate how many pixels each one of these parts should be according the overall width of your blog (if you want to do that, here’s a cheat sheet help: I use the crop tool to measure different part of the image. So click on crop, like you’re going to crop something. It will show you the dimensions of selected areas. Just use that to measure and make adjustments, and then hit cancel instead of cropping).

BUT– that’s not how I do this part. I like to eyeball it. Simply because, in my experience… my calculations never work. And I just got sick of the logical method failing me every time, so I switched over to eyeballing it. Don’t worry, there is a LITTLE technique to it so that it’s not just total guess work 🙂 And once you’ve done this part the first time, you can just use this image as a template for any future backgrounds!

So…. Step 3: Use the text tool to number across the image (sort of like a football field). It can go anywhere on the image, mine is shown at the bottom here:

How to Create a Custom Blog Background Using #picmonkey

Step 4: Save the image to your desktop and upload it as your background image in a new tab or window (if you have a high traffic blog, you may want to wait until night time or a low traffic day to install your background so people don’t see the “measuring” background. Or… you can just not care, like me, since it only takes a few minutes 🙂 )

DO NOT EXIT OUT OF YOUR IMAGE ON PICMONKEY! YOU WILL BE RETURNING TO EDIT THE IMAGE!

Instructions to install on blogger:

  • Dashboard >> Template (I like the white Simple template) >> Customize
  • Background >> click on the downward arrow beside the sample square >> upload image
  • Proceed to upload the image and save

Instructions to install on WP (.com or self hosted):

  • Dashboard >> Appearance >> Background
  • Find “select image” >> Browse (select the file from your desktop) >> Upload (you may need to remove a default background here)
  • Under “display options” be sure to select center, tile vertically, and fixed

How to Create a Custom Blog Background in #picmonkey**Don’t be scared if it looks super skinny in the preview– it’ll be okay.

 

 

Step 5: Check it out on your blog– odds are, it’s not going to fit just right quite yet. See how my header and body section are hanging off the sides of my center section?

How to Create a Custom Blog Background using #picmonkey

So I scroll down to my numbers to see where the “true” edges of my blog are…

How to Create a Custom Blog Background using #picmonkey

So here, I can see the left edge lines up with the 8 and that the right edge covers up the 1 in the 17. Awesome, now I know exactly where I need to work. So I go back to my Picmonkey image (that I DID NOT exit out of) to make my edits.

Step 6: Make the necessary changes to the center section (widening or shrinking it as necessary, using the numbers as a guide). Once the widths are correct, delete the numbers and proceed to “decorate” the background. Right now, I like polka dots. Chevron is pretty awesome too– there’s so much you can do if you just take the time to play around with the overlays in Picmonkey. Also– don’t worry about the designs going over the white part in the center– we’ll get to that.

How to Create a Custom Blog Background using #picmonkey

The easiest way to get straight polka dots is to create a row of periods (I put a space between each one), then duplicate the text for each new line.

Screen Shot 2013-01-30 at 8.17.56 PM

Notice that my dots are pretty small here compared to how they look on my blog– plan for your images to be larger on your blog than they appear when editing.

Step 7: Add a new white rectangle layover. Match it to the exact size as the center section and cover up any designs that may be in the middle. Even if you don’t have any designs in the middle section, you may still want to add a new layer. It’s helpful if you’re adding a border to the center, which we’ll get to next…

How to Create a Custom Blog Background using #picmonkey

Screen Shot 2013-01-30 at 8.18.40 PM

Ok, you can call it quits here if you want– save the image to your desktop and upload to your blog background. Or, you can go on to the next step and add a border.

Step 8: I’d suggest using the banners and ribbons overlays for bordering. A lot of people have asked me how to do scalloped:

Screen Shot 2013-01-30 at 8.19.14 PM

Select the highlighted Ribbons overlay

How to Create a Custom Blog Background using #picmonkey

Change both of the colors to white (DO NOT leave color 2 as “transparent” for a scalloped edge)

How to Create a Custom Blog Background using #picmonkey

Rotate the overlay so it’s vertical and line it up on the edge of your center rectangle. For your frame of reference: I shrunk my ribbon overlay quite a bit– about half the size of what it is when you click on it. Remember– all these images will appear larger once on the blog. To maintain a consistent size among overlays, right click and DUPLICATE the overlays– don’t try to copy it yourself.

Duplicate the overlays, and line them up and down the center rectangle, ends touching but not overlapping. If you don’t have a steady finger, you may want to use the up and down arrow keys to move the overlays once they are close enough to each other.

Screen Shot 2013-01-30 at 8.21.26 PM

The key to making a “seamless” background is to make sure your top and bottom overlays reach the edge at a good spot– you don’t want them to be cut off in the middle.

Step 9: Keep your image open in Picmonkey until you’ve made all necessary adjustments! You can see how I went back to change mine after the installation. I even decided that I wanted my border to be “tucked” underneath the white center section (which is why it’s a good idea to add that center rectangle overlay, even if you don’t have designs going across the middle).

Screen Shot 2013-01-30 at 8.23.33 PM

How to Create a Custom Blog Background using #picmonkey

How to Create a Custom Blog Background using #picmonkey

How to Create a Custom Blog Background using #picmonkey

How to Create a Custom Blog Background using #picmonkey

(this is the size border I’ve used for my current background– so you can compare the actual size)

That’s it! You’re done! Enjoy your fabulous custom background 🙂

Disclosure: I am receiving various forms of compensation as a result of my partnership with Picmonkey.com, including free Royale services. However, these opinions are 100% my own. Don’t believe me? Check out some of my previous DIY design posts. I’ve been recommending these guys and their paid services for a loooooooong time, even before we established  a partnership.

« Previous Post

Dark Chocolate & Almond Overnight Oats Recipe

Next Post »

30 Candy Recipes

62 thoughts on “How to Create a Custom Blog Background in Picmonkey”

  1. I’m not a blogger, just enjoy reading others and I’ve actually never posted a comment on any blog, but I have to now …this is very, very kind of you to help others with what looks like a big deal to make their blogs inviting for people like me! God bless you… 🙂

    Reply
  2. Thanks to another tutorial you shared recently I am in LOVE with PicMonkey now. Thank you for sharing! I’m not in love with my premade layout for my blog, but lack the skills to create one myself or the funds to hire someone to create one, with this, I may actually be able to do it myself. Awesome!

    Btw, I was reading your about me section and it says you are a fan of NC..are you from or do you live in NC? I’m assuming by NC you do mean North Carolina, since you said everything except UNC, which I could NOT agree more..I’m NOT a UNC fan at all! I’m a North Carolina girl born and raised so just curious!

    Reply
  3. Ah Ashton, your amazing tutorials finally convinced me to get picmonkey. I have photoshop elements which works great for most things…but I just love all the features PicMonkey has! This is a great tutorial 🙂

    Reply
  4. I never leave comments, but I’m so thankful for this tutorial and I just wanted to say thanks for your hard work!! This has saved me a TON of money! You rock 🙂

    Reply
  5. Um… you are incredible!!! I am sooo thankful I found your blog, it has been a HUGE help. I finally feel like I am starting to get off my feet a little and I know that you were a part of that. Your picmonkey posts were super helpful, easy to follow, creative, funny…. okay, I should stop before you think I’m crazy. All that to say… thank you!!

    Reply
  6. Thanks for another great tutorial. I think Pic Monkey is going to be much easier than all of the rest of the editors that I have come across. I just hope they stick around, they all come and go <3

    Reply
  7. I’m so happy I found your blog – it’s such a wealth of information. I’m a HUGE fan of picmonkey so updating everything should be fun (once I figure out all this new stuff)!

    You rock.

    Reply
  8. this was really helpful, but how do you get it to stay centered? For example, i got it to look right on google chrome and internet explorer but on the iphone it was way off centered and looked aweful.

    Reply
  9. Hi Ashton, I am trying to upload the backgroun onto my blogger, but for some reason its not showing up. What could I be doing wrong that this is occurring. Please help me, I am desperate of a new facelift!

    Reply
    • Try using this code: body {background: #ffffff url(YOUR BACKGROUND IMAGE URL GOES HERE) no-repeat center fixed;}
      .body-fauxcolumns .fauxcolumn-outer div, .body-fauxcolumn-outer .cap-top .cap-left {background:none;}

      Upload your background image somewhere that will generate a URL (like photobucket, flickr, etc..). Then grab that URL and insert it into this code.

      Paste the code into the CSS section of your design dashboard. Save and done!

      Reply
  10. I simply have to tell you that I Love, Love, Love, Love you. I have recently been using your tutorial to help make my blog look pretty and more professional. thank you so much for taking the time out for all of us and sharing the wealth of knowledge on designing your own blog. Thank you so much. I am a forever fan now.

    Reply
  11. Just did a few of your tutorials!! They are awesome! Thanks for the user friendly way of teaching how to make our blogs snazzy! Still lots to do, but come check it out and let me know what you think!

    Reply
  12. hi would you do kindly show video tutorial for adding background. above instructions are very good but people like me who have very limited knowledge of how blog works, video tutorial would be excellent

    Reply
  13. So if I wanted to create a new header to go ON this background (and uncheck the header for my theme) could I just put it on the background? On my blog the background is everywhere and it seems like my header area is transparent? I don’t know if that makes sense. http://www.perpetualpageturner.com

    Your tutorials are the BEST I’ve found! Thank you!

    Reply
  14. Thanks for this clear tutorial on how to create a custom background. I followed all the instructions and created a background with my favourite colour -blue. But i am having problems uploading it to my blog site as i’m only given options to upload the default backgrounds only. please how do i do this?

    Reply
  15. Thank you, this was so helpful! I created my own background and it’s all fine and dandy now! It was making a lot of stress for me before! The numbers thing was something I’d never even considered before, so thank you 🙂

    Reply
  16. This is awesome! I just discovered PicMonkey yesterday to basically watermark all my images and it’s SO user friendly that I think I’ll be able to do this No problem. Thank you so much for this very helpful tutorial!!!
    ~Jessica

    Reply
  17. Hi Ashton,
    Thanks so much for this post – I have been wanting to change my blog background for a long time.
    I’m having an issue with inserting the image I created on PicMonkey. When I upload and save it on Blogger, then I select ‘Tile Vertically’, the image appears way up above my header in the menu bar across the top. I don’t have the three options you list for Position – instead there are six graphic options showing top left, top middle, top right, bottom left, bottom middle and bottom right. I’ve tried both middle options (instead of Center) but the image remains way off the background of the blog. I’d sure appreciate any help you can offer!
    *I think your idea to sue numbers to determine the width is genius!!
    Becky

    Reply
  18. Thank you so much! You have demystified the process for me. I’ll be creating something fresh and new today and finally moving past the plain white background!

    Reply
  19. Thank you so much for this amazing tutorial! I made a blog background with your instructions a long time ago, but I never got a chance to thank you. I want to make a new blog background again on Picmonkey to change things up a bit…. I just need the time.

    Reply
  20. Thanks so much for the great tutorial! I am a new blogger and need every little bit of help & appreciate the clear instructions! Look forward to jumping in and getting more creative!

    Reply
  21. Thank you for this tutorial! Unfortunately I found PicMonkey (as easy as it was.. ) pointless unless you have the paid subscription! The text portion (also) kept freezing on me and the java or flash (whatever it used) kept crashing.

    I got as far as the ribbon, though, before I realized I had to have a subscription to use it. Gah. 🙁

    Reply
  22. Thank you so very much for this blog post! I have played around with picmonkey so much and have always come back to this post if I needed help. Finally I have a background for my blog!

    Reply

Leave a Comment