Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] How can I put a background on some pages but not others?

Home Forums Support How can I put a background on some pages but not others?

  • This topic has 5 replies, 2 voices, and was last updated 6 years ago by Tom.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #46187
    Rebecca

    I tried setting the background to “local” but that didn’t work. I only want the background on certain pages.

    Also, is there a way to get the background to stretch to fit the height of the page instead of repeating? Thanks!

    #46199
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    At this point there’s no option to set background images for specific pages – but it is planned in a future version of the Backgrounds add-on, or in a new landing page addon (haven’t decided yet).

    For now, you would have to use CSS to apply the background images to specific pages – it’s not super hard, so if you’d like instructions on doing that, let me know.

    As for your second question – if you choose the “Cover” option under “Size” – the image should stretch to fit the height of the page.

    Let me know 🙂

    #46207
    Rebecca

    Yes, please, the CSS would be very much appreciated!

    #46250
    Tom
    Lead Developer
    Lead Developer

    Hi Rebecca,

    So, each page in WordPress in given a unique class name in the <body> element.

    You can find this class by using Google Chrome, right clicking your website, and clicking “Inspect Element”.

    Near the top, you’ll see: <body class="....

    In there, you’ll find the unique class for that page, which will look something like: page-id-2

    “2” will be replaced by the unique ID of that page.

    So, in your CSS, you’ll do this:

    .page-id-2 {
          background-image: url('URL TO YOUR IMAGE');
          background-size: cover;
    }

    And that should do it 🙂

    #46395
    Rebecca

    Thanks! What would I put to set the background size to 100% width?

    #46415
    Tom
    Lead Developer
    Lead Developer

    The background-size: cover; part will make it 100% width and height.

    You can also do this:

    background-size: 100% auto;

    Which would be 100% width, and then let the height figure itself out.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.