How to make background fixed at the bottom.

  • Author
  • #1036982

    I want my background to look good on all screen sizes like this website:
    When you enlarge your browser the background sticks to the bottom unlike mine where if you enlarge it, it just shows more of the bottom of the background and the top is always the top.
    I like how you can always see the bottom of the grass and then on a larger monitor you can see clouds at the top.

    The blog I need help with is


    You should change your background position values on the body tag. Here is an example:

    body.custom-background {
        background-position: bottom center;

    Here is a reference for how it works:

    Note that you have to combine this with setting the background attachment to “Fixed” on the Appearance → Header page.

    Aside: The best way to make updates is to select the “Add my CSS” option on the Appearance → Custom Design → CSS page and then just add in small CSS snippets for changes you want to make that are different from the original stylesheet. You would just want to use the original stylesheet as a reference and not copy and paste the entire thing into the CSS editor.


    I can find:

    body {

    Thats it…
    My background is fixed.
    I cannot find anything that says background image or custom background etc…


    I just copy/paste the code you gave me into me css under the body section.

The topic ‘How to make background fixed at the bottom.’ is closed to new replies.