Adding static background image to pages with a container (Event Calendar Pro)

Support
#1

Hi X,

I’d like to add a background image to pages with a container.
I know how to do this on pages built within Pro and I know how to add it as a whole site background.

The issue is that we are using Event Calendar Pro and we would like the pattern on these “workshop” pages (there will always be 10-30 of them so site wide CSS is better than adding one by one).
Example page: http://kpa.flywheelsites.com/workshop/st-louis-mo-laurie-luck/

I was able to add it here, on the ALL event listings http://kpa.flywheelsites.com/workshop/
with this CSS:

.single-tribe_events{
background-image:url(http://kpa.flywheelsites.com/wp-content/uploads/2018/01/KPA-digital-stationary-pattern-lime.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}Preformatted text

But this CSS doesn’t seem to work for each “location/individual event” page.
.events-list{
background-image:url(http://kpa.flywheelsites.com/wp-content/uploads/2018/01/KPA-digital-stationary-pattern-lime.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

The Events Calendar suggests that it’s a theme design question.

Thanks for any and all help!!

#2

Hey @INcroatia,

Your single-tribe_events CSS actually works.

It does not work in your example page: http://kpa.flywheelsites.com/workshop/st-louis-mo-laurie-luck/ because of the syntax error in your CSS. You can check the rest of the errors in http://csslint.net. To prove that it is the syntax error causing the issue, try adding your single-tribe_events CSS again at the very bottom of your code. You’ll see that it will work

Hope that helps.

#3

Life saver! Thank you!

1 Like
#4