CSS Code: Fixed No-Repeat Site Background

This question always comes up, especially in WordPress, and today, while looking for something else I found three ways to do this, all on one site.  Let me explain that…

When I was first learning code I had a terrible time doing this simple thing.  Well, it is simple to me now, but not then.  So I had made several attempts at this, from three different angles, but only one was done successfully.  Of course this was the last one I tried and off I went to accomplish other things.

But today, with my better understanding in hand, I bumped into all three of them in quick succession, and saw why the other two didn’t work.

I will now explain as simply as possible starting with the easiest way;

Fixed no-repeat site background

Method 1

If you are using WordPress go to your Dashboard and click Appearance>Editor.  Now open Header.php.  Insert this code inside the tags;

 

body {
background-attachment: fixed !important;
}

 

Be sure to include the !important to override theme settings or this may not work!

I say this last one is the easiest because it avoids naming your background image by url.  The next two methods require this step, however it is easy to do.

Fixed no-repeat site background

Method 2

First go to your Custom CSS slot in your theme Dashboard and drop this code in, then insert the url for your background image;

body {
background-image: url(“url for your image here“);
background-repeat: no-repeat;
background-attachment: fixed !important;
}

Be sure to include the !important or this probably will not work!

Next go to Media>Library in your dashboard and find the image you are using for the background.  Click on it once.  On the right hand side you will find the url for that image, copy it and paste it into the code above to replace url for your image here, but remember to leave the quotes in the finished code.

Fixed no-repeat site background

Method 3

If your theme does not have a Custom CSS included in the dashboard simply go to Appearance>Editor and open style.css and drop this code in.

body {
background: url(“url for your image here“)

top right no-repeat;

background-attachment:fixed !important;
}

Be sure to include the !important or this probably will not work!

Next go to Media>Library in your dashboard and find the image you are using for the background.  Click on it once.  On the right hand side you will find the url for that image, copy it and paste it into the code above to replace url for your image here, but remember to leave the quotes intact.

I suppose either of the lower two code snippets are likely interchangeable, but all three of these methods worked in their specified locations for me. Let me know in the comments if you have any problems with any of these.

Happy coding!

Save

Save

Save

Save

Save

Save

Save

Save

Close Menu