Using image for button in Image block

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. 

Can you share link to page where you use image block? We can help easier.

The site is not live, so I do not have a link. 

Please set up a site-wide password. Post the password here.

We can take then a look at your issue.

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.

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. 

I'm using the free stock on image that are available online. There are also some tools that change the filr format like this and it's totally working free.

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.

12 minutes ago, creedon said:

Did you add the code to Design > Custom CSS?

Here what my code looks like here.

Yes I did. 

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.

43 minutes ago, creedon said:

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.

Thanks for all your help! Not sure what is going on either... 

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

I'm glad you found a solution!