hello there! First time visiting? Subscribe to get new posts via email.

Creating a Custom Blog Background {Video Tutorial}

Design your own blog background using Picmonkey! www.somethingswanky.com

 

I mentioned (briefly) in this post that I would be working on getting my YouTube channel (all about blog design) up and running soon. And today, I present to you: my first video tutorial!

(ack!)

I feel like such a goose making videos, but enough of you have asked for video tutorials that it seemed like a good idea. So I’ll be going back through my designs posts and adding videos to each one– starting with the posts that have had the highest demand for video help.

#1 on the list: creating you own custom blog background. You can see the tutorial here, or watch the video below!

 

(please try to pardon me the idiotic sign off– first video jitters!)

Ashton Swank

Ashton is the owner and author of Something Swanky. Although first and foremost a wife and mother, she considers herself an online entrepreneur, freelance writer and photographer, and brand ambassador. Her focus is in food styling, food photography and recipe development.

28 comments on “Creating a Custom Blog Background {Video Tutorial}”

  1. That was great! Love the video and can’t wait to see more. Thanks so much for adding these. I have a wordpress.com blog (or I should say the START of one :) ) and can’t wait to try it out. What makes this fun right now is learning so much new stuff!

  2. Hello!

    I was wondering if you would do a post on how you got your blog up and running and how you started.

    Thank you

  3. Thanks for the tutorial. I love PicMonkey!

  4. I had no plans to do a redesign…but now I’m itching for a change! Thanks for the tutorial!

  5. You’re an awesome tutorial maker. :)

  6. oh how I love you for showing how to do this in a way that dummy me can understand! Thank you SOOO much Ashton! :>D

  7. Thanks so much. Very easy to follow and very detailed. I appreciate you addressing the basics.

  8. This is such a great tutorial! Can you also do “how to create your own blog header in pic monkey”? Is that where you do yours or is it custom made?

    • I’ll work on a video for a header! I made my own in Picmonkey (although, just this weekend, I had someone do a little header tweak for me and I don’t think she used picmonkey)

  9. Great video! I had no idea you could edit the dimensions or even manually enter the color codes! It doesn’t look obvious on the screen. You have saved me so much frustration! Thank you!

  10. Hi, I am new to picmonkey and blog design. I am very thankful for this post. I followed through and made my own custom background but the picmonkey wouldn’t let me use the ribbons cause I am not a paid member. Are there places I can get free embellishments to import into the picmonkey on my own??? Also, I tried to make a header, well, it turned out fine, but when I put it over into wordpress and selected preview site, it didn’t look right at all. It was lowered down and not at the top of my background and smaller than what it should have been. What happened? I tried to resize in picmonkey to tweak it, but didn’t work as well. I am not a paid member on wordpress either, but I want to learn how to do my own custom blog.

  11. I got a little confused at the css part – where did you get the background css code originally that was in your sidebar?

    • Hi Jacquelyn,

      I had the same question as you, but after watching the video several times, I realized that the code is simply pasted into a gadget. However, the code isn’t in the post (yet), so I typed it out and tested it myself … it works like a charm. Here is the css code if you want to try it out:

      body {background: #ffffff url(ENTER THE URL LINK FOR THE IMAGE) no-repeat center fixed;} .body-fauxcolumns.fauxcolumn-outer div, .body-fauxcolumn-outer.cap-top .cap-left {background:none}

      Where the caps are in the parenthesis, just just copy and paste the url link for the location of the image and follow the rest of the tutorial in the video.

      I hope this helps. :-)

      Hi Ashton!

      Thank you for the wonderful tutorials that you do!! I’m also a big fan of picmonkey and after a year of playing around with it, I also got myself the premium package. I find it addictive to use. :-)

      I’m looking forward to your future posts.

      Rosa

    • HELP!!!!

      I am having difficulty adding this code along with my background image I want. Can someone help me???
      I used the code that Rose posted but I am still having no luck. Also does it matter that I have another CSS code in the box to center my navigation. If so is there a trick to have them both or should I have one or the other? I would like to make a personalized nav bar but I haven’t gotten that far. I think I can do that by adding a html gadget? Is this correct.

      Thank you for your help in advance,
      Cameron

  12. I have tried EVERYTHING! I have also searched the web for every answer possible and NOTHING is working. I still just have a plain white background. Please Help!!!

  13. hmmm i alr got the image url but i don’t know what is the entire CSS? the part where u just sub the image url… what is that? please help.. i’m so close to getting it>.<

  14. This is a great tutorial! I am a newbie blogger and I’m trying – with limited success – to personalize my blog but many instructions I find are beyond my skill level. I appreciate your clear explanations so even I can understand! I’m looking forward to creating my own background now – thank you!

  15. Hi Cameron, Hi Angela,

    I hope you had a safe and happy holiday! Sorry that I didn’t reply sooner. Things are a bit quieter now that Christmas is over, and I have/had a little more time to look into this. :-)

    I watched the video again, made step-by-step notes, and tested it out. It worked fine, except that it only appeared on the bottom half of the blog. while the top half remained white. After playing around with the settings, I was able to find the simple fix.

    I looked at both of your blogs and noticed that you have the backgrounds tiled. First, remove the background setting. Click on Template, Background, and select Remove image. Then go to Advanced, Backgrounds, and set the ‘Outer Background’ and ‘Header Background’ to Transparent (click on dropdown arrow and select Transparent at the bottom of the menu). This should fix the problem. :-)

    Cameron, to answer your question: yes, you can have multiple CSS codes in the box (Add custom CSS), but make sure to leave 2 or 3 spaces in between each CSS code. The code I posted in my last comment only works in the Designer Template and will not work if pasted in an gadget.

    I hope this helps. If not, then let me know. :-)

    Wishing everyone a Happy New Year!!

    Kind regards,
    Rosa

  16. This video really helped me thank you! I am a complete newb, so I had no idea what to do. :)

    Thanks again!x

    Hana x

  17. Hey ladies I found another way to make it easier for you to put your background picture in for your blog without the coding. Go to Template like you always would and save your existing template than go to Customize. Than go to Background , you will see a box that say Background Image with your existing background and a drop down button. Click on that button and you will see other backgrounds. You can use those or choose your own by clicking on upload image and than get the background you made and upload it. Hope this helps!!

  18. I loved your tutorial. I followed it step by step but when I went to get the CSS code, it wasn’t there. Is there any other way to get it?

  19. Thank you so much for creating the tutorials! I was able to create a background for my new blog!

  20. thanks for sharing wonderful tutorial.

  21. Thank you so much for this, Ashton! I’ve been using Blogger since it was in beta, and still didn’t know how to change my background. And it’s worth a ton to know that I can host images on a dummy blog. Did I say thank you? :-)

Comments are closed.