Shape behind text in section -- SS7.1

Site URL: https://academyforlittlelearners.squarespace.com/

Hey there! I'm attempting to add a shape behind a mission statement on a site i'm working on, idea is that it would contain the text info but no matter how much I try I can't seem to get it completely right. It works on one size then when I resize my browser it's messed up. Can anyone help? Anyone have a better way to do this?

Site: https://academyforlittlelearners.squarespace.com/

Password: 1234

Code currently used for reference:

 ///shape behind mision statement///
section[data-section-id="61eeff225bcf5e5c96f867dc"] .sqsrte-large {
  background-image: url('https://static1.squarespace.com/static/61eefd7df4c9615d74606c8e/t/61fd56e32c4f24344f332f5b/1643992803306/AcademyforLittleLearners_2022_webbackgrounds-08.png');
 background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  display: inline-block;
  padding: 120px;
  color: #000;
}

Try adding Our Mission in a new text block & change your code to this

div#block-yui_3_17_2_1_1644005008993_12619 {
    background-image: url('https://static1.squarespace.com/static/61eefd7df4c9615d74606c8e/t/61fd56e32c4f24344f332f5b/1643992803306/AcademyforLittleLearners_2022_webbackgrounds-08.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
div#block-yui_3_17_2_1_1644005008993_12619 * {color: black;}

9 hours ago, tuanphan said:

Try adding Our Mission in a new text block & change your code to this

div#block-yui_3_17_2_1_1644005008993_12619 {
    background-image: url('https://static1.squarespace.com/static/61eefd7df4c9615d74606c8e/t/61fd56e32c4f24344f332f5b/1643992803306/AcademyforLittleLearners_2022_webbackgrounds-08.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
div#block-yui_3_17_2_1_1644005008993_12619 * {color: black;}

 

Hmmm, not quite there. Let me know if you want access to take a closer look. I'm really stumped on this one.