How to Create a Custom Blog Background in Picmonkey

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.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Comments

  1. This is really helpful! Thanks for the tutorial Ashton. Now I have some homework to do!! :)
    Mariely recently posted..DIY: Safety Pin BraceletMy Profile

  2. This is great Ashton! :)
    Dorothy @ Crazy for Crust recently posted..Biscoff Banana BreadMy Profile

  3. 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… :)

  4. Thank you for all the helpful hints … I’m technology challenged, big time!
    Brenda recently posted..New stuff …My Profile

  5. Love love love it!!
    Katrina @ In Katrina’s Kitchen recently posted..2 Ingredient Truffles {Hot Chocolate Edition}My Profile

  6. Wow – you rock even more than I thought :)

  7. I am sooo not tech savvy. I’m so glad to have found this tutorial; thanks so much!
    Kari@Loaves n Dishes recently posted..THE LAST WILL BE FIRST AND THE FIRST WILL BE LASTMy Profile

  8. This is really helpful! I’m off to be creative…

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

  10. Thank you so much!
    Jenn recently posted..Copycat Panda Express Chow MeinMy Profile

  11. Wow!! Thanks so much–I love your tutorials :)
    The Farm Girl recently posted..Chewy Peanut Butter Granola BarsMy Profile

  12. Oh Thank you for such a great tutorial! I have pinned this!
    Chandra@The Plaid and Paisley Kitchen recently posted..Blondie Lolly PopsMy Profile

  13. 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 :)

  14. Your design tutorials are the best thing ever! Anytime, I have an issue, I just check out your blog and your step by step tutorials help me so much! I am quite new when it comes to this blogging stuff and you have been so helpful. Thank you!

  15. I definitely am guilty of not having a background right now…so I will be using your tutorial soon! Your PicMonkey tips are always so clear and concise! Thanks :)
    Megan @ The Pink Flour recently posted..Super Bowl Bingo Printables for the “Harbowl”My Profile

  16. This is an awesome tutorial, Ashton! It makes me want to redesign my blog . . . like eight times.

  17. Awesome post!Thanks SO much! I’ve been wanting to personalize my blog, but I’m new to WP. And I love that you use pic monkey– it’s so easy!!

  18. 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 :)

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

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

  21. THANK YOU!!! I’ll be doing this within the next few days. I really like your background though lol.
    Amanda Joy recently posted..Mediterranean Snacks Sweepstakes! {February Shenanigans Hop}My Profile

  22. How do you keep the original look of your tabs & stuff? When I switched from picture window to simple/white it changed the way my tabs/text/etc looked. Other than that, things were going great…haha.
    Amber @ Dessert Now, Dinner Later! recently posted..Key Lime CupcakesMy Profile

  23. Just used your tutorial. Worked great, thank you so much!
    Brenna recently posted..My Favorite Crocheted Dishcloth TutorialMy Profile

  24. 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.
    Urban Flowerpot recently posted..Do You See What I See…My Profile

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

    • This may not be an ideal technique for mobile devices. I don’t use my blog design on mobile devices– instead it’s just a standard WP look :P

  26. found your amazing tutorial on Pinterest! thank you so much for this – it worked wonderfully!
    Ling @thefooddash recently posted..banana-passionfruit cake with toasted almondsMy Profile

  27. So happy i found your blog from Pininterest!

    Bookmarked ;)

  28. I am trying to use your tutorial, but as I try uploading my background into Blogger it is telling me the file is too big. Any advice?

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

    • in desperate need of a new facelift**

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

  30. Thank you for sharing this step-by-step tutorial. This is *exactly* what I needed. :)
    Jen recently posted..the one where i go off-topic at the endMy Profile

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

  32. 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!
    Tristen recently posted..Gwen 8 MonthsMy Profile

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

  34. That is pretty awesome! I had no idea one could do that. Angela Butler – Clarksville, TN Photographer

  35. 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!
    Jamie recently posted..Some Friday Fun!!My Profile

  36. 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?
    Majovo recently posted..ALUU 4: How A Dog Was Used To Torture Them Before They Were Set AblazeMy Profile

  37. 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 :)

  38. Awesome tutorial. Didn’t know picmonkey was so good.
    Renee DeSuza recently posted..New Theme: PersonalMy Profile

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

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

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

  42. thank you so much

  43. 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.
    Book Nerd recently posted..Mr. Moonie….. (THE MOON)My Profile

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

  45. Jade Watts says:

    I cant seem to find the background css code anywhere… what is it again ??

  46. Thank you so much for this fabulous tutorial! I am trying to redesign my blog all on my own and this has been super helpful!
    Mrs. Spriggs’ Kindergarten Pond
    Melissa Spriggs recently posted..My 10 Things for Summer Vacation!My Profile

  47. 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. :(

Trackbacks

  1. [...] How to Create a Custom Blog Background in PicMonkey by Ashton @ Something Swanky [...]

  2. [...] And finding a pre-made background that is your color scheme…? Near impossible. I came across this tutorial on Pinterest  that walks you through step by step how to make a custom background. I will admit, it took some [...]

Leave a Comment

*

Current day month ye@r *

CommentLuv badge