Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
tweezy

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

Question

Hello,

Does anyone have a css code that would let me put an image as my "read more" button?

I would like the image to go behind the button with the words on top.

THanks!

Share this post


Link to post

16 answers to this question

Recommended Posts

  • 0
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>

 


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
3 minutes ago, tuanphan said:

Can you take screenshot of an example?

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.

Share this post


Link to post
  • 0
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


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
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

 

Share this post


Link to post
  • 0
2 minutes ago, tweezy said:

nothing happened when I added the code

 

Where did you add?

add to brand styles page settings > advanced > header


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
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!

 

Share this post


Link to post
  • 0
1 minute ago, tuanphan said:

Where did you add?

add to brand styles page settings > advanced > header

It's working now, but I added it to the Custom CSS.

Thank you so much!

Share this post


Link to post
  • 0
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?

 

Share this post


Link to post
  • 0
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;


COVID-19Free priority support for all users (29/03 - 30/04). You can tag me (@tuanphan) or send to my email.

With paid support, see here

 

Share this post


Link to post
  • 0
4 minutes ago, tuanphan said:

padding-top: 100px;

padding-bottom: 200px;

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

Thank you!

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...