Jump to content

How To Add Image into a Code Block?

Recommended Posts

Site URL: https://www.aghlaw.com.au/document-packs

Hi,

I'm looking to find if it is possible to add images or icons inside code blocks? My client wants to add company logos inside of each of the boxes on their services page (see screenshot). 

Each box is an individual service package that requires a different logo in each box. 

Any help would be appreciated!

Thanks,

Jordan

Screen Shot 2022-01-24 at 1.05.52 pm.png

Edited by Jordy_TheShop
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi Jordon,

I'd probably go with pseudo elements.  The below example assumes the same logo/icon for each block, but you could swap out the block id's for the class used below (custom-pricing-table) in the actual pseudo element. ie: create a ::before element for every different logo/table

In the below example the outline is for reference only, so you can easy identify where the element is.  Play around with the sizing/padding to match your icons/logos.
 

.custom-pricing-table{
  position:relative;
  padding-top:100px;
}

.custom-pricing-table::before{
  content:"";
  position:absolute;
  width:20%;
  min-width:80px;
  aspect-ratio:1 / 1;
  top:0;
  left:0;
  background-image:url("https://upload.wikimedia.org/wikipedia/commons/c/c5/Squarespace_Logo.png");
  outline:red 2px solid;
  background-size:cover;
  
}
  
}

 

Edited by IgnitePerth

Contact Us for detailed help

Common Squarespace Tips

Sharing Your Site Link

Squarespace web designers in Perth WA.

Link to comment

in Code Block 1 ($1500 popular), edit your code

<div class="custom-pricing-table">
  <span class="tag">Popular</span>
  <span class="price"><strong>$1,500</strong> incl. GST</span>
  <h4>Set Up Pack</h4>
  <hr>
  <p>
   Everything you need to get started on your business. 
  </p>
  <a href="/set-up-bundle" class="sqs-block-button-element--large sqs-block-button-element" data-initialized="true">What’s included?</a>
</div>

to this

<div class="custom-pricing-table">
  <img src="https://cdn.pixabay.com/photo/2021/12/23/13/25/flower-6889331__480.jpg" width="100px">
  <span class="tag">Popular</span>
  <span class="price"><strong>$1,500</strong> incl. GST</span>
  <h4>Set Up Pack</h4>
  <hr>
  <p>
   Everything you need to get started on your business. 
  </p>
  <a href="/set-up-bundle" class="sqs-block-button-element--large sqs-block-button-element" data-initialized="true">What’s included?</a>
</div>

Do similar for other Code Blocks

image.thumb.png.382cc62d3f5eeda8e41e9ae329dc0dd0.png

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

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.