Creating a Custom Blog Background {Video Tutorial} posted by Pin Share Tweet Email SomethingSwanky is reader-supported. When you buy through links on our site, we may earn an affiliate commission at no extra cost to you. 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!) About the author Related Posts How to Store Coffee Cake: Freeze & Preserve Your Streusel Treat Cashew Substitute: Vegan Options for Cashews in Cream Recipes How to Prevent Slips and Falls in the Kitchen: A Guide Substitute for Mint: Best Fresh and Dried Substitutes to Use
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! Reply
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 Reply
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 Reply
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? Reply
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) Reply
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! Reply
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. Reply
I got a little confused at the css part – where did you get the background css code originally that was in your sidebar? Reply
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 Reply
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
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!!! Reply
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>.< Reply
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! Reply
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 Reply
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 Reply
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!! Reply
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? Reply
Thank you so much for creating the tutorials! I was able to create a background for my new blog! Reply
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? 🙂 Reply
