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

Using image for button in Image block


Karen8392

Question

Hello, 

I am wondering how to get my button block to be transparent here. I can see my image underneath but can not get the button to be transparent. It worked for my medium buttons and large buttons, but this one is in am image block. Please help. 

 

Screen Shot 2020-10-12 at 9.04.25 AM.png

Screen Shot 2020-10-12 at 9.04.34 AM.png

Screen Shot 2020-10-12 at 9.04.57 AM.png

Screen Shot 2020-10-12 at 9.09.47 AM.png

Link to post
  • Answers 12
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hey Thomas! With your code and a little playing around I got it to work. Also needed to change background color in the section themes to get the background to go away! Thanks for all your help! Here i

Posted Images

12 answers to this question

Recommended Posts

  • 0

First remove or comment out the following CSS. Make a copy for safe keeping if removing

.image-button,.image-button.sqs-dynamic-text {
    width:175px !important;
    background-color:transparent !important;
    background-image:url("https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png");
    background-size:100px;
    background-repeat:no-repeat;
    background-position:left;
    font-family:'Modernline';
    font-size:15px !important;
    font-color: #966b20;
}

Then add the following.

.image-button {

  background-image: url( https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png );
  background-size: 100px;
  background-repeat: no-repeat;
  
  }

.image-button.sqs-dynamic-text {

  font-family: Modernline;
  
  }

.primary-button-style-solid .sqs-block-image .design-layout-card .image-button a {

  background-color: transparent;
  color: #966b20;
  
  }

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
On 10/13/2020 at 8:30 PM, creedon said:

First remove or comment out the following CSS. Make a copy for safe keeping if removing


.image-button,.image-button.sqs-dynamic-text {
    width:175px !important;
    background-color:transparent !important;
    background-image:url("https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png");
    background-size:100px;
    background-repeat:no-repeat;
    background-position:left;
    font-family:'Modernline';
    font-size:15px !important;
    font-color: #966b20;
}

Then add the following.


.image-button {

  background-image: url( https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png );
  background-size: 100px;
  background-repeat: no-repeat;
  
  }

.image-button.sqs-dynamic-text {

  font-family: Modernline;
  
  }

.primary-button-style-solid .sqs-block-image .design-layout-card .image-button a {

  background-color: transparent;
  color: #966b20;
  
  }

Let us know how it goes.

Hello Thomas, 

It still does not have a transparent background. It is hidden behind the color. 

 

Screen Shot 2020-10-15 at 3.20.29 PM.png

Link to post
  • 0
2 hours ago, Karen8392 said:

It still does not have a transparent background. It is hidden behind the color. 

Did you add the code to Design > Custom CSS?

Here what my code looks like here.

1337823491_ScreenShot2020-10-15at4_51_43PM.thumb.png.018e5944bdfe394b74b4b8952ed48c98.png

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

Well I'm a bit stumped at this point. I do see a problem on line 39 on your pic. "https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png" is repeated twice. I think that issue would only prevent the pic from showing up.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0
On 10/13/2020 at 8:30 PM, creedon said:

First remove or comment out the following CSS. Make a copy for safe keeping if removing


.image-button,.image-button.sqs-dynamic-text {
    width:175px !important;
    background-color:transparent !important;
    background-image:url("https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png");
    background-size:100px;
    background-repeat:no-repeat;
    background-position:left;
    font-family:'Modernline';
    font-size:15px !important;
    font-color: #966b20;
}

Then add the following.


.image-button {

  background-image: url( https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f846621262bce78fcc4d7a2/1602512418551/Logos+v2-48.png );
  background-size: 100px;
  background-repeat: no-repeat;
  
  }

.image-button.sqs-dynamic-text {

  font-family: Modernline;
  
  }

.primary-button-style-solid .sqs-block-image .design-layout-card .image-button a {

  background-color: transparent;
  color: #966b20;
  
  }

Let us know how it goes.

Hey Thomas! With your code and a little playing around I got it to work. Also needed to change background color in the section themes to get the background to go away! Thanks for all your help! Here is the code that worked: 

 

//Button in Image Block 
.image-button-inner {text-align: left
 !important;
padding-left: 19px;}

.image-button .image-button-inner {background-image: url( "https://static1.squarespace.com/static/5f7f72329f726c44987f2b9d/t/5f9cf356ff6048551e2f02da/1604121430733/Logos+FINAL+v3-53.png");
  background-size: 20px;
  background-repeat: no-repeat;}

.image-button.sqs-dynamic-text {font-family: Modernline;}

Screen Shot 2020-10-31 at 8.20.53 PM.png

Link to post
  • 0

I'm glad you found a solution!

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

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