I'm currently tackling an issue on my website where I need help aligning and positioning the background image in the main header section.
My goal is to ensure that the image is fully visible in this area, even when viewed on mobile devices.
Attached is a screenshot illustrating the problem - the image appears centered despite using larger images:
https://i.sstatic.net/XjcaB.png
Here's the CSS code I've been working with:
.header-six .header-t {
padding: 30px 0;
text-align: center;
background-image: url("/image.png");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}