Using different version of logo on different pages

Site URL: https://rose-pike-aek7.squarespace.com/

Hi all! I am using the Cailles template and need to use different versions of the logo on different pages (white logo on full bleed photo background and dark blue logo on pages with light background). I have using suggestions from posts re: other templates but have not found a solution. Anyone know what code I should insert to make this happen? I have saved the secondary logo in the custom files.

Thank you!!

Add to Page Settings > Advanced > Header. Each page has Page Header

<style>
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
<style>

Hmmm . . . I tried that with my image URL but it did not work. 

43 minutes ago, mydavis said:

Hmmm . . . I tried that with my image URL but it did not work. 

 

It works here. Double check your image url, maybe it doesn't exist.

Here is the code I am using:

<style>
.header-title-logo img {
    visibility: hidden;
}
.header-title-logo a {
    background-image: url(https://static1.squarespace.com/static/5e6fc297a3e3627e85192c4d/t/5e71720c38067705e7fa983a/1584493068511/CAM_website_logo_blue_flatofont.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}
<style>
 

And where I am inserting it is attached. Am I doing something wrong? 

I see the code works. Try clearing your browser cache.

Thank you so, so much. You have been incredibly helpful. I really appreciate it!!