Background Per Page
[resolved] background not top aligned (7 posts)

  1. JanjaWat1
    Posted 4 years ago #

    I just installed the background per page plug-in and I'm having an issue with the top alignment. It looks like the image has a top margin. I would like it to be aligned to the top and not tile.
    I have a page that tiles the image and one that doesn't to show what is happening. deaktivated all other plug-ins to see if that was the problem. Any ideas?


  2. Jason Lasky
    Posted 4 years ago #

    The best fix would be to add the vertical options to the plugin.

    Meanwhile just add css to the html page:
    <style> body, body.custom-background {background-position: center top !important;} </style>

  3. Jason Lasky
    Posted 4 years ago #


    The problem with my suggestion above, to just add the styling in to a html editor of the page, is it will be deleted by the Visual Editor (if used).

    Since I'm handy with css, I've decided to go with a plugin to insert page specific css in it's own field (great plugin):


    I still think the Background Per Page plugin could be very useful for people not wanting to insert css, once the vertical alignment and an option for entering an image URl or select form media library is available.

    Good luck.

  4. JanjaWat1
    Posted 4 years ago #

    Thanks, Jason. I didn't even think about giving it the class of custom background. I'll have to try that.
    Since the design I was trying to do is responsive, the background per page is not going to work anyway.
    The other plug-in you mentioned sounds great. I will check that out. Thanks :)

  5. mapgrrl
    Posted 3 years ago #

    Im having the same exact problem on my dev site:



    the background aligns top center correctly only on the home page, then aligns center center on all of the other pages. Ive combed through all of my template & plug in files searching for body.custom-background tags that would govern bg image position but so far I cannot locate the problem tags. I can even "fix" the problem temporarily inm Firebug, but I cant get at the the correct file to edit.

  6. mapgrrl
    Posted 3 years ago #

    the use of the " !important " code in my stylesheet as you suggested in my style.css body tags seems to have overridden the cause of the problem. I 've applied an effective bandaid to the problem, which is good, though I'd like to correct the source code. THanks!

  7. shawn00m
    Posted 3 years ago #

    Unfortunately for me, the !important code doesn't help because it also locks in the horizontal position. I have some unique background and so I have used all three horizontal alignments and my putting in the !important in my css, now they are all center aligned.

    Definitely count this as a request to add vertical alignment to the next update.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Background Per Page
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic