Agency Pro – Background issue!

[Bader]

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

[Stefsull]

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. :))

[Bader]

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

[Bader]

Any thoughts?

---

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

[debbieg]

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