Align text on Image Poster Block and background color on textblock

Site URL: https://sheep-kumquat-absr.squarespace.com/config/design/custom-css

I'm trying to justify the text on my Image Poser block, and would like it to align in in the left top corner. Can't find the right code. See what I am aiming for in the attached screenshot.

I'm also wondering if it's possible to add a background color to a text block, image caption? See same screenshot from sketch. 

Thanks! 

sure, add the following to your css code. this will do it for all image cards though, so if you want it to only happen on one page, add in the squarespace block it, or just put it inside a code block on that page (wrapped in style tags).

figcaption.image-card-wrapper {
  justify-content:flex-start !important;
  align-items:flex-start !important;
}

figcaption .image-card {
  margin:10px;
}

figcaption.image-card-wrapper  .image-title {
  text-align:left !important;
}

figcaption.image-card-wrapper .image-title p, 
figcaption.image-card-wrapper .image-subtitle p {
  background-color: rgba(0,0,0,0.3) !important;
  padding:3px 8px;
}

figcaption.image-card-wrapper .image-subtitle {
  margin-top:0 !important;
  text-align:left !important;
}

here's the layout sqs uses in the code, so that should show you which classes are doing which bit

ends up looking like this

Hi again! And thank you very much 🙏🙏

I manage to get the text on the image in the left top, and It also looks nice with the background color on it. But I didn't understand how to get the background color on the text below the image. It's an textblock since I can't fint how to get a image-caption under a image poster.

https://sheep-kumquat-absr.squarespace.com/config/design

oh right. I misunderstood. you could put in a code block and then wrap your text in a span and style it with the same rules I applied to the header.

<p style="  background-color: rgba(0,0,0,0.3) !important;
  padding:3px 8px; color:white;">
  Here is some text
</p>

• rgba(a,b,c,d) is a way of specifying colour and opacity, the first three numbers go up to 255 and the last one is from 0.0 to 1.0. 1.0 is a block of colour, 0.0 is totally transparent
• if you wanted to do this lots of times, then add the styling to your custom css as a class and use that in your code block

in your custom css:

.myFancyClassName {
background-color: rgba(0,0,0,0.3) !important;
padding:3px 8px; 
color:white;
}

in your code block

<p class="myFancyClassName">some text here</p>