How do I get my blog background to look right?

Tue, Feb 3, 2009

Tips & Tricks, Tutorials

PROBLEM: You just purchased a blog background and can’t get it to look right, well use one of the snippets below and paste it into the custom CSS area in your blogging platform: (Replace www.example.com/… with your link)

THIS CODE WILL MAKE IT APPEAR BUT WILL NOT CENTER IT OR REPEAT THE BACKGROUND:

body {
background: url(http://www.example.com/background.jpg);
}

IF YOU WANT IT TO REPEAT VERTICALLY AND HORIZONTALLY PASTE THIS:

body {
background: url(http://www.example.com/background.jpg) repeat top center;
}

IF YOU WANT IT TO BE FIXED PASTE THIS:
body {
background: url(http://www.example.com/background.jpg) fixed top center;
}

Hope this helps!

73 Responses to “How do I get my blog background to look right?”

  1. Julie Says:

    I have spent a long time trying to get blog background up. Inspite of your clarification, still trouble for me. I am new to this though. I think the problem is with image from photobucket. It posts to my blog saying picture deleted or unavailable??? What am I doing wrong? I copied at 1mg and copied the direct link and pasted as shown. Any ideas? I really want the background.

    PS Love all of the new things your are doing. It is easy to see that this will be one of my very favorite sites. Thanks and if you don’t have the time to help, don’t worry. I know you have alot on your plate and this is not your prob. Julie

  2. stewart Says:

    Can you paste your code here? Maybe we can help.

  3. Pebbles Says:

    I am a new designer and I want to put Rhonnas blog couture on my blog. I will be advertising my designs at my stores. I purchased a photographers license since it allowed s4h even though I will not be selling any products made with her stuff. I just want to dress my site up with her stuff. I absolutely adore her designs. It will have a link just as it does now. I will be advertising for you as well! LOL

    Question: Is this allowed or will there be a problem?

    Thank you

    Pebbles

  4. Guadeliessize Says:

    Hi, cool site, good writing ;)

  5. Jackie Says:

    Did it only the birds cut of which could be the cutest oh well still looks much better Thank You

  6. Casey Says:

    I can’t seem to get my background working. Pasted is my code. Help!

    body {
    background:$bgcolor;background-image:url(http://i420.photobucket.com/albums/pp285/cmatheso/Houseof3_RFVintageBotanical.jpg);background-position: center; background-repeat:no-repeat; background-attachment: fixed;

  7. rhonna Says:

    hmmm…Casey, email me, ok?
    rhonna@houseof3.com
    I’ll try to help you out!
    R

  8. joanne Says:

    Well, I don’t know what I am doing wrong, I got my banner to work straight away, but for the life of me I can’t get my background working. I follow all the instructions, but end up with a white blog…..

  9. bethcupitt Says:

    i can’t do it either! :(
    i’m so ridiculously bad at this. just a white background for me too.

  10. bethcupitt Says:

    haha. it just has a frowny face. i didn’t say that. i said that i have a white background too! but it does make me have a sad face. look, i’m even so bad technically that i can’t properly leave a comment!

  11. BeckyB. Says:

    YES. I finally got mine to work!!!! My problem- when I cut and pasted the html code from your tutorial… I miseed the semi-colon at the end. FYI- background will NOT work without that semi-colon!

    Very pleased :) Thanks for the beautiful backgrounds and look forward to keeping mine fresh!!!

  12. elisabeth Says:

    HELP THE BACKGROUND IS SHOWING UP TO SMALL. HOW DO I GET IT TO WORK

  13. elisabeth Says:

    I JUST GOT THE BACK GROUND ON TEH BLOG TO WORK BUT IT APPEARS REALLY SMALL. WHAT AM I DOIGN WRONG

  14. steph caskey devlin Says:

    Rhonna, just wondering if you guys will be doing Blog Couture for Typepad.

    I have already created my own banner, but this would just be the icing on the cake.

    Steph xo

  15. Rhonna Farrer Says:

    Steph, email me, ok?
    rhonna@houseof3.com

    Elisabeth…what is the size of your background? If it’s over 1MB:
    1. open it up in Photoshop,
    2. GO TO FILE>SAVE FOR WEB & save it.
    THEN use it…it compresses it enough that it will fit in the ‘under 1MB’ photobucket.

    LMK if this helps, K?
    R

  16. Rhonna Farrer Says:

    beth, did we get you set up?
    can’t remember who i’ve helped & who still needs help…

    we are committed to getting this working for you all…email me if you are having problems, k?

    Becky, woohoo for YOU!!!!!
    congrats!
    :)R

  17. joanne Says:

    I did it finally, I feel so stupid, when I was pasting all the link part was missing, so I typed it in and it worked….only took me a few weeks to figure out lol

  18. Lisa Wyatt Says:

    Hi,

    I hope you don’t mind me emailing you, I have tonight just purchased a blog background and header, which I love I have to say. I now need to be able just to get it to work right LOL. I need to make the blog background a bit smaller so that I have more white space for my posts and sidebars - I hope this makes sense.

    Here is a link to my blog http://lisascraftworld.blogspot.com/ where you should be able to see the problems I am having. Any help would be much appreciated.

    Many thanks

    Lisa

  19. Lisa Wyatt Says:

    Ok sorry everyone, I have now sorted it. It was how it saved in photobucket.

  20. WendyB Says:

    Help, I’ve purchased a background and just cannot get it the right size on my blog. You can see if here http://whatsnextthen.blogspot.com/ Please ignore banner that’s still a work in progress :) I’ve tried various things including resizing on Photobucket but I must be missing something obvious. This is the code I’ve used background:$bgcolor;background-image:url(http://i564.photobucket.com/albums/ss90/WendyBee/Houseof3_RFVintageBotanical.gif);background-position: center; background-repeat:no-repeat; background-attachment: fixed;

    Any assistance greatly received. Wendy

  21. WendyB Says:

    Oh dear, that should say ‘gratefully received’ :)

  22. WendyB Says:

    Woohoo, have sorted it thanks, it was the ‘work in process’ banner that was throwing it out.

  23. Kim Goldman Says:

    Rhonna or anyone who uses typepad - help!
    I have two different house of 3 blog backgrounds.
    I had no problem using them with my own css code but the middle part was overwritten by the colors dictated in typepad. I thought this was a limit of using typepad but heidi is on typepad and hers worked so following her article instructions today I changed my own css to be exactly what hers was (except the link is to my file of course) and now it will not load at all, will not preview, will not save the change. I just get a “whoops typepad has encountered an error” message. I can click on the link for either in my files and it displays just fine. Help please? Thanks.

    Kim

  24. Wendy Says:

    I am doing something wrong…I can’t figure it out…someone please help. :(

    body {
    background: url(http://sassywe.typepad.com/blogbackground.jpg) fixed top center;
    }

  25. Lauren Says:

    I just downloaded the Damask Corner background and followed all the same directions as when I downloaded the Damask Artisan background, but this one is not working properly. It’s showing up as a small image in the center of my blog background. I uploaded it to photobucket the exact same way and I did the Artisan, but it ends up being smaller somehow. Is anyone else having this problem? Can you please help me?

    Thank you!

  26. Nicki Lundeen Says:

    I have added the free header and background to my site. However, the header is not stretching across like it should. The background from the header section is showing behind the new banner. Can you help me with this? Everything else seems to be just fine.

    Thanks so much. Love this!!!!!!

  27. Pamela Says:

    I used the beautiful blog couture freebie you had on your site. I can see myself changing this on a regular basis - your stuff is so gorgeous and reasonably priced. My problem is getting the background to the correct size.
    Please see:
    http://mythreesixtyfiveproject.blogspot.com/

    It needs to be down further and out to the sides a bit further (I think). Please help.

    Pamela

  28. Ronna E. Says:

    Love your blog designs and successfully loaded the banner but am having a problem with getting the right size for the background. It appears to have loaded too large and I’m not sure what step I should take to re-size -see here: http://fabpapers.blogspot.com/
    Any help appreciated.

    Thanks, Ronna

  29. Pamela Says:

    Well I logged on to my blog this morning just for fun and it looks perfect so please don’t worry about my post from yesterday and I’m so pleased with my blog that I’m off to purchase some more blog couture.

  30. Christa Says:

    here is my code can someone tell me why it’s not right

    background-image:url(http://i27.photobucket.com/albums/c187/christaw/Hof3_RFHousewarming_Background.jpg)
    ;background-position: center; background-repeat:no-repeat; background-attachment: fixed;

  31. nokiawadd Says:

    mobile phone noikia

    nokiawad9981

  32. Kelly Says:

    Another one here who can’t get the background right!

    This is my code:
    body
    {
    background-image:url(’http://i560.photobucket.com/albums/ss42/kelly2576/untitled.jpg’);
    fixed top center;

    }

    But the image repeats instead of stretching across the background. How do I fix it? Plus, I want the background to stay fixed, and not move with the scroll…

    Thanks!!!

  33. Kelly Says:

    Ok.. I got it to stay fixed, but my background still repeats..

  34. Kelly Says:

    Ok, when I host my image on typepad, instead of photopucket, it works. Using the same exact code.

    Now I have another question. How do I get my center column to be transparent (so you can see the graphic behind)?

    http://kellyspages.typepad.com

    Thanks!

  35. Rhonna Farrer Says:

    Kelly, go to Heidi Swapp’s blog…she uses Typepad & had some info on that! HTH!

  36. Sinead Says:

    Hi Rhonna,

    Will these backgrounds and headers work on the Wordpress Professional Photographer Theme blogs?

    Thanks!

  37. Rhonna Farrer Says:

    Sinead, I don’t know. I do know that some people have used them on their WordPress, but had to do something to them…I don’t use Wordpress, so I’m not sure…

    any word pressers here? :)
    R

  38. Michelle Says:

    Hi! I love love your banners and backgrounds for the blogs. I purchased two of each but can’t get the background to post on typepad. I’m not sure exactly what the link is that I’m supposed to paste in place of the word example. I tried copying and pasting all of the link that is shown once you upload your file to your typepad site. I pasted it in the place where you had written example but can’t get it to work.
    Any help would be awesome!

    Download Houseof3_RFOfftheHook.jpg (422.5K)

    This is what my “link” file looks like that I copied and pasted into the wording you have above on the tutorial. What am I doing wrong? Thanks so much for your time!

  39. Sinead Says:

    Rhonna, I’m going to send an email to the person who designed the theme and see what he says. I’ll report back when I have an answer. I love these designs and I’m *determined* to find a way to use one of them on my blog. :)

  40. Melody White Says:

    Do you have a code for the background I just bought? When i downloaded it i drug it to my best top and and seem to find out how to apply it to my blog.
    Thank you

  41. Rhonna Farrer Says:

    Melody, you create your own code by uploading the image into Photobucket. It is this link that you copy & paste into your code.

    If you need more help, email me, ok?
    rhonna@houseof3.com

  42. katiebabie Says:

    i bought a blog background and can’t findthe code anywhere.. i click on my downloads and it jsut opens upthe image in a webpage? Please help!
    thanks!

  43. katiebabie Says:

    nevermind.. i just read you answers above my question.. i will try that first and check back if it is a problem! thanks!

  44. katiebabie Says:

    i tried photobucket and its not working! please let me know! thanks!
    Katie

  45. Danelle Says:

    Rhonna,
    It appears that I am having a similar problem as some of the above posters. My header and background are too big and you can’t read half of my post. Can you help?? Also, is there anyway to put my blog title into the banner on the header? Thanks for your help!!! Danelle

  46. Rhonna Farrer Says:

    Katie make sure your photobucket is copying. I’ve tried several times & it *says* it’s copied, but it’s not.
    I had to even go into the ‘link options’ & actually highlight the link & copy it.
    THEN I was able to paste it in my HTML code in Blogger.
    It seems like Photobucket is moody! LOL!

    Try this, ok?
    R

  47. Rhonna Farrer Says:

    Danelle, your blog is private so I can’t see it.
    I’d need to see it to know what’s up.

    Also, be sure to read the bottom of the post: How To Blog Backgrounds…
    the viewing is always different for each monitor & browser.

    Email me if you need to, k?
    rhonna@houseof3.com

    R

  48. Rhonna Farrer Says:

    Michelle, email me, ok?
    R

  49. Lisa Says:

    I’m having a terrible time with this…please help!

    Here’s my link -

  50. Lisa Says:

    Oops…my link didn’t publish, here it is again -

    I’m just not sure where I’m supposed to put this information in Blogger. Thank you for your help!

Leave a Reply