Replace a page title with an image on just one page - Harris Template

I am trying to replace the page title of just one page with an image. The site is using the Harris template.

Any advice would be greatly appreciated!

@ediblewalls can you share site url?

If your site is private/trial, setup password & share url. See how to: https://beaverhero.com/squarespace-how-to/#HowtoSetupPasswordShareSiteURL

wcctxlaw.com

page in question is wcctxlaw.com/proud

@ediblewalls Add to Home > Design > Custom CSS

/* Hide Page Title */
body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title span {
   visibility: hidden;
}
/* Insert New Image */
body#collection-5d446c9ae6e9770001f3aaf8 h1.page-title {
   background-image: url(https://images.squarespace-cdn.com/content/v1/5d26197…/1564…q3JJthZTcucY-Z3n09bwP_S9f_xILyS3loG5KTnpdHvwWR-dhpQ/Parker.jpg?format=300w);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   height: 100px;
   width: 100px;
}

body#....f8 is Page ID. Each page has different ID. See how to find Page ID. https://beaverhero.com/squarespace-how-to/#HowtoFindPageID

Hmm...that code just shows up on the top of the page.

Am I missing something?

Also, the image I am trying to replace the title with is the attached image, not the image called Parker

Home > Design > Custom CSS

Maybe you inserted in Header in Advanced.

Where should it go if not there?

Thanks for all of your help, btw

@ediblewalls Replace https://images.squarespace-cdn.com/content/v1/5d26197…/1564…q3JJthZTcucY-Z3n09bwPS9fxILyS3loG5KTnpdHvwWR-dhpQ/Parker.jpg?format=300w

with your image url :P

See how to insert CSS: https://beaverhero.com/squarespace-how-to/#HowtoInsertCustomCSS

Wont that change every page?

I'm trying to just change that one page.

Tried it and it worked!

Well, it removed the page title.

Now I need to remove all that blank space so that I can put an image block there.

Thanks so much!

@ediblewalls How do you want the image? Small like that or bigger or full width?

And which spaces do you want to remove?

Can you take a screenshot, or draw on the screenshot I send?

Sorry for the delay. Please see the attached image

Thanks!!

@ediblewalls Try this

body#collection-5d446c9ae6e9770001f3aaf8 .page-text-wrapper.clearfix {
   background-image: url(https://beaverhero.com/wp-content/uploads/2019/07/coffee-beans-1082116_640-min.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
   max-width: 100vw !important;
   height: 30vw;
}

Try it first. If you feel okay, we'll fix the mobile / tablet later

Wow! You are a genius!!

I can't thank you enough!!

@ediblewalls On Mobile and Tablet there is a very wide space above and below. Use the following code to remove them.

/* Remove top bottom space */
body#collection-5d446c9ae6e9770001f3aaf8 .page-text-wrapper.clearfix {
   margin-top: 0;
   margin-bottom: 0;
}

Dang you are good!

@ediblewalls Do you have other issues to help?

That's all for now. I really appreciate all your help!

@ediblewalls Okay. Have you a great weekend.

Accept Answer if it worked. Thanks.

If you aren't sick of me yet, I have something else I need help with:

The image is the correct size on desktop view but not on mobile view.

I was just wondering if there would be any way to make the mobile view of the image bigger without cropping out some of the words?

Thanks again!

@ediblewalls Can you take screenshot? Looks good here

We would like the rainbow image to be the same size in mobile view as the longhorn image on the homepage is in mobile view.

@ediblewalls Full width & higher?

@ediblewalls Full width & Higher?