How to Add A Fixed Background Image

If you’re using a WordPress theme that scrolls and you choose to use a background image (not a background pattern), this is imperative, that is unless you’re into your background image scrolling with your content. Having your content glide smoothly over your background image is as easy as inserting this code snippet into your style.css file, or if you’re using a GPP theme, into your custom CSS box. Easy as pie!

 

body
{
background-image:url('example.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}


21 responses to “How to Add A Fixed Background Image”

  1. Patrick Wilson Avatar

    Thank you. I’ll give it a go!

  2. larryH Avatar
    larryH

    it worked perfectly. All other blogs had limited info on this topic. Yours had the info about putting the code into the custom ccs file – nobody else said to do that! Genius!

  3. Dub Man Avatar
    Dub Man

    Very much appreciate your concise and easy to read tutorial here. Many thanks

  4. Chris Avatar
    Chris

    Exactly what I needed. This displays my background image at full size and it is static as the page scrolls over it. Thank you

  5. John Bogdanski Avatar
    John Bogdanski

    Cant make it work in a thesis theme. Works great in standard format tho’. Suggestions?
    Thanks!

    1. TAG Avatar
      TAG

      I haven’t been able to make it work on Thesis either, although I’ve used it several times in other sites – have you found a solution?

    2. Graph Paper Press Avatar

      Not sure. It’s a theme agnostic CSS snippet.

  6. James Avatar
    James

    Thank you! Fist pumped for literally 10 seconds when this worked. Whatever that’s totally normal.

    1. Graph Paper Press Avatar

      Ha ha, that’s awesome (fist pumping right now)!

  7. Ben Avatar
    Ben

    Worked great, thanks so much mate!

  8. Margar David Profesore Avatar

    thank for sharing this info

  9. Tools for the Muso Avatar

    Brilliant bit of code! Worked instantly and looks great… Thanks.

  10. Trish Avatar
    Trish

    Thad! All day I’ve been looking for this thank you. Today was css 101 for me so I was wondering how this will play out if I am creating a few separate WP pages each with a different BG image? This instead of applying the BG to the whole blog. I got a little csa code in and applied it to the page ID. I was feeling quite smug until I previewed. What I got was a BG image that was cropped really strange (chopped off a good clip of the top of the image). And what I’m hoping you just solved, my gray content background running over the main BG instead of transparency.

    I’m using a prophoto theme and I’m OVER it. It functions great, but this is impossible and their galleries suck. Any advice would be appreciated.

    http://Www.trishreda.com/blog

    I’m on my phone now and don’t have the link to my disaster.

  11. Dika Avatar
    Dika

    is there a plugin to change the background image?

  12. Daniel Keith Avatar

    Hi Thad, I have inserted this code in my custom CSS box, but nothing changed. Can you explain is there any other way to integrate this code into my website. Thanks in advance!

    1. syed zabi Avatar
      syed zabi

      hey just copy this and paste it in custom css… it worked for me:)
      background-repeat:no-repeat;
      background-attachment:fixed;

  13. syed zabi Avatar
    syed zabi

    Awesome Thad worked like charm!!

  14. zeeshan Avatar
    zeeshan

    Hi i have put this css code in my custom css section it apply as a background image not fixed plz help me

Leave a Reply

Your email address will not be published. Required fields are marked *