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


