This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

want to change the background image of 1 page without changing the background image of all pages

Open 10 replies general
11 years ago · Last reply by Andrew Misplon 11 years ago

This is probably not really specific to your theme. Sorry but i’m relatively new to working on websites but i am trying to learn.

What i’m wanting to do is change the background image of a single page. I’ve tried looking at the customize option but that seems to change the background image of all the pages on the site. I’m looking to leave the main page with no image and one of my sub-pages with a background image.

Could anyone give me some guidance on this?

Thank you very much in advance,
Paul

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

10
  1. Andrew Misplon Staff 11 years, 6 months ago

    Hi Paul

    Please let us know which theme you’re looking to do this with and we’ll try help out with some Custom CSS.

    Thanks

  2. Paul Boudreau 11 years, 6 months ago

    Andrew

    I believe i am using the vantage theme

    PS i cant login with my original login. Using the forgot password doesn’t send an email to me.

  3. boudreaupaul 11 years, 6 months ago

    ok. nm on the password issue. it finally sent me a reset email

  4. Andrew Misplon Staff 11 years, 6 months ago

    If you inspect the source code for any page you’ll find a body tag near the top. Within that body tag is a unique page class you’ll need to use that page class to prefix the #main container to run a background image for a particular page.

    So for example if it were this page, right here on the forum, we’d insert the following under Appearance > Custom CSS:

    .postid-3621 #main {
    background-image: url("http://localhost/so/wp-content/uploads/2014/09/wallpaper-2677423.jpg");
    }

    You’d also need to change my file url with yours.

    If you haven’t ever inspected page source before, here is our tutorial on using the developer tool to do so:

    https://siteorigin.com/basics/modifying-theme-design-with-custom-css/

  5. Andrew Misplon Staff 11 years, 6 months ago

    If you’re running Vantage Free you can insert the CSS snippet into a Custom CSS module like the one included with Jetpack:

    http://jetpack.me/support/custom-css/

  6. boudreaupaul 11 years, 6 months ago

    I believe it’s the paid version and not the free. I’ll take a look. Quick question, am i modifying the actual pages file manually? Or is there a “Custom CSS” input box within the theme?

  7. boudreaupaul 11 years, 6 months ago

    ok. never mind i think i understand now.

    i’ll be working it and let you know if there are any complications i need help with.

    Thank you very much for your guidance

  8. Andrew Misplon Staff 11 years, 6 months ago

    For sure. Good luck with your project.

  9. boudreaupaul 11 years, 6 months ago

    ok. it worked. I was a little amazed that i did it without messing it up somehow.

    what i’ve noticed (but not sure its related) is that the “custome CSS” feature no longer lets me pick a background image.

    After i changed the background image of my “Web-service” page with your instructions, i continued to the main page and attempted to change it’s background image. When i go into Appearance-Custom CSS and i open up the Page accordion, then try to select an image file to use as a page background image it doesn’t work. What happens is i select the image and it sits there fore ever. when i check i see that the image is uploaded to my server but for some reason never applied.

    Does this mean i need to manually set all my background images from now on? (As you have previously described above)

  10. Andrew Misplon Staff 11 years, 6 months ago

    As long as #main is prefixed with the body class of the page you’re setting the background image of, then there shouldn’t be a negative effect on your ability to set the global background image. Perhaps confirm your url for me and I’ll check this.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread