Jump to content

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

Recommended Posts

  • Replies 37
  • Views 1.2k
  • Created
  • Last Reply

@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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@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;
}


Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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!

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.