Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 16
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution
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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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
2 minutes ago, tweezy said:

nothing happened when I added the code

 

Where did you add?

add to brand styles page settings > advanced > header

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.