• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Agency Pro – Background issue!

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › Agency Pro – Background issue!

This topic is: not resolved

Tagged: agency pro, background image

  • This topic has 4 replies, 3 voices, and was last updated 9 years, 3 months ago by debbieg.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • February 14, 2014 at 12:09 pm #90321
    Bader
    Member

    Hi,

    I'm using the Custom Background Extended plugin to assign different custom background images for different pages. It works just fine on all pages but not on my shop page (woocommerce): http://www.arganfarm.com/argan-oil-shop

    What can I do to fix this?

    Cheers 🙂


    “Whether you think you can, or you think you can’t–you’re right.”
    ?• Henry Ford

    February 14, 2014 at 2:18 pm #90340
    Stefsull
    Member

    I'm not sure WHY your plugin isn't working. I can tell you what's missing from your ecommerce page though. It's the <div class="backstretch" with the image inside.

    That said, you could easily do this much more gracefully and through CSS alone, and disregard the plug in altogether. All you need to do is add a class to your CSS for each page using a unique class from that page. For instance, on this page: http://www.arganfarm.com/argan-oil-history/organic-argan-oil-cooperatives/

    You would add this class (based on the fact that the page ID class is .page-id-560 ... you could also add a custom class name, I'm sure):

    .page-id-560 {
    background-image: url(http://www.arganfarm.com/arganicx/uploads/cooperative-bg.jpg);
    background-size: cover; /* This tells the browser to cover the whole viewport area of the browser with the image */
    background-repeat: no-repeat;
    background-position-y: -27px; /* I used this position based on what you had used with the image from the plugin */
    background-attachment: fixed; /* This keeps the image from scrolling */
    }

    To compare, on your ecommerce page, you could do this:

    .postid-6999  {  /* This is the id of the ecommerce page - you could also use .premise-landing-6999 */
    background-image: url(http://www.arganfarm.com/arganicx/uploads/cooperative-bg.jpg); /* change for your unique image */
    background-size: cover; 
    background-repeat: no-repeat;
    background-position-y: -27px; /* You may not need this on your new image */
    background-attachment: fixed; 
    }

    So you get the idea. All you have to do is find the post ID for each page and change the image in the CSS. You can easily add a custom image to every page. (BTW, I LOVE Argan oil. :))

    February 17, 2014 at 8:07 am #90749
    Bader
    Member

    Thank you for your answer Stefsull.

    Unfortunately, it didn't work for me until now.

    I've added this to the css file:

    .page-id-5026 {
    background-color: #fff;
    background-size: cover; 
    background-repeat: no-repeat;
    background-position-y: -27px; /* You may not need this on your new image */
    background-attachment: fixed; 
    }

    And tried this as well:

    .pageid-5026 {
    background-color: #fff;
    background-size: cover; 
    background-repeat: no-repeat;
    background-position-y: -27px; /* You may not need this on your new image */
    background-attachment: fixed; 
    }

    I've also tried to make it simple and tried this:

    .page-id-5026 {
    background-color: #fff;
    }

    Then this

    .post-id-5026 {
    background-color: #fff;
    }

    And this:

    .postid-5026 {
    background-color: #fff;
    }

    ≈≈≈≈≈≈≈

    The shop page id is 5026 (http://www.arganfarm.com/argan-oil-shop)
    In the editing page url, there's "...post=5026...", therefore I tried it with both in the css, page-id and post-id.
    --
    #Arganoil: that's awesome! Please PM me at: bader(at)arganfarm.com 😉


    “Whether you think you can, or you think you can’t–you’re right.”
    ?• Henry Ford

    February 20, 2014 at 9:06 am #91384
    Bader
    Member

    Any thoughts?


    “Whether you think you can, or you think you can’t–you’re right.”
    ?• Henry Ford

    February 22, 2016 at 8:56 pm #179681
    debbieg
    Member

    Hello Stefsull,

    I found this thread while looking into how to add a different background image on each page. Thank you for this information!
    I'm making changes to the genesis sample theme & having trouble finding what size the background image needs to be sized when I upload it so that the image fills the screen without getting cut off.

    Any help is appreciated!

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble