Jump to content

Placing an image behind the "read more" button in Brine layout

Recommended Posts

  • Replies 16
  • Created
  • Last Reply
3 minutes ago, tweezy said:

826135412_ScreenShot2020-01-29at9_27_29PM.png.6e1c8576b04ef466d640e5879eec20cb.png

Instead of the "read more" block, I'd like an image. The "Read More" text can stay, just replace the box with an image.

You can share link to read more text on your site? It need some custom CSS

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
Just now, tweezy said:

YESSS!!!

add to page settings > advanced > header

replace with your image url

<style>
.image-button-inner a {
    opacity: 1 !important;
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-position: center;
    color: white !important;
    border: none !important;
}
</style>

 

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
Just now, tuanphan said:

add to page settings > advanced > header

replace with your image url


<style>
.image-button-inner a {
    opacity: 1 !important;
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-position: center;
    color: white !important;
    border: none !important;
}
</style>

 

nothing happened when I added the code

 

Link to comment
3 minutes ago, tweezy said:

nothing happened when I added the code

 

 

6 minutes ago, tuanphan said:

add to page settings > advanced > header

replace with your image url


<style>
.image-button-inner a {
    opacity: 1 !important;
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-position: center;
    color: white !important;
    border: none !important;
}
</style>

Never mind, had to remove the <style> tags

Thank you sooooo much for your help! I really appreciate it!

 

Link to comment
19 hours ago, tuanphan said:

Where did you add?

add to brand styles page settings > advanced > header

Hello again, another question...

The image is being cut off at the top and the bottom, how can I increase the space around the image at the top and the bottom?

 
Link to comment
1 hour ago, tweezy said:

Hello again, another question...

The image is being cut off at the top and the bottom, how can I increase the space around the image at the top and the bottom?

 
  •  

padding-top: 100px;

padding-bottom: 200px;

or you can try editing background-size: cover to background-size: contain;

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

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.