How to Add A Fixed Background Image

Updated on

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;
}


Newsletter
Join over 280,000 independent website owners

The next person to join our monthly newsletter gets a 25% off coupon!

We guarantee 100% privacy. Your information will not be shared.

This entry was posted in . Bookmark the permalink.

Posted by , at Graph Paper Press

Thad is the founder of Theme.Works and Graph Paper Press. Previously, he produced online multimedia and documentary projects for USA Today including the inauguration of President Barack Obama and many others. He lives in Brooklyn, NY with his wife Abby.

  • Google
  • Blog
  • Instagram

21 thoughts on “How to Add A Fixed Background Image”

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

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

    1. 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?

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

  4. 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. hey just copy this and paste it in custom css… it worked for me:)
      background-repeat:no-repeat;
      background-attachment:fixed;

Leave a Reply