Background image on home page is also the default image on other pages

[cathleenh]

Theme: Community Pro
Beginner Website Developer
Minimal html/css coding

In using the Community Pro Theme, each new page shows an image and a title. I am able to customize images for posts and pages. On some of the plug-ins that I use in this theme such as Staffing, Events Pro and WooCommerce Tickets, I'd like to use unique images to style each page. Currently, the page is defaulting to the home page background image.

I was provided css code by the Studio Press Team:

"You can try the following css code added to your child themes style.css file and change the image url to the image you would like displayed on this page: http://hellobeautyfull.org/events/

.post-type-archive-tribe_events .image-header-fill {
background-image: url("http://hellobeautyfull.org/wp-content/uploads/2015/10/hbf_img_website-header_alyssa-sand-dunes-with-blurred-border_extended-top.jpg") !important;
}

For http://hellobeautyfull.org/staff/lori-pastore/ you would use the following code and update the url:

.postid-648 .image-header-fill {
background-image: url("http://hellobeautyfull.org/wp-content/uploads/2015/10/hbf_img_website-header_alyssa-sand-dunes-with-blurred-border_extended-top.jpg") !important;
}

After many ways of trying, I am unable to override the css code for the default background image.

If I open Google Chrome Inspect, I can change the image url to the desired image. I just can't change it in the css style sheet of the child theme.

Any assistance would be appreciated.

Cathleen H

http://hellobeautyfull.org

[Brad Dalton]

You can use PHP code with some jQuery or a plugin like background manager https://pippinsplugins.com/simple-fullscreen-background-image/

---

Tutorials for StudioPress Themes.

[cathleenh]

Thank you so much for your response, braddalton!

I will have someone write the PHP/JQuery code for me. Hopefully, it will be relatively simple and not too costly.

Thanks again,

Cathleen H.

[Author]

Posts