CSS to position background image

I would like to reposition the background image of a section on my password page so that it is aligned with the top left of the section. I am hoping then I can reposition the text box within the section using top and left padding to display the text within the image as per the screenshot below.
The site is here – Angel and Bert
Is anybody able to help with the CSS?
Thanking you in anticipation.

Try this code in the “Custom CSS” setting of this section:

h2 { padding: 100px 0 30px 120px;  }
p  { padding-left: min(20%, 120px);}

@media (min-width:750px){
  h2 { padding: 25px 0 30px 350px; }
}

img {
  width: 350px !important;
  max-width: 70%;
  
  object-position: left top;
}

.background-image-container {
    padding-left: calc( 50% - var( --page-width)/2 );
}

Hi @Pale_September

In your Shopify Admin go to online store > themes > actions > edit code
Find Asset > base.css and paste this at the bottow of the file:

.background-image-container img { object-position: top left; object-fit: cover; }

You could also try adjusting the actual background positioning directly on the section container instead of only padding the text elements.

Something along these lines may help:

.banner,
.password-main {
  background-position: top left !important;
  background-size: cover;
}

.banner__content {
  padding-top: 80px;
  padding-left: 120px;
}

The exact class names may differ depending on the theme, but the idea is:
• Position the image from the top left
• Then separately control the text container spacing with padding/margins

I would also recommend checking mobile responsiveness because fixed left padding can sometimes break alignment on smaller screens.


Thank you to all for taking the time to have a look for me. This one worked perfectly.