Add a black background to the sides of an image banner.

Store Design
1

Hello, I’m having a bit of trouble coloring the white background to the left and right of the banner image. I’d like the areas beside the banner to be black, and I’ve tried to achieve this with CSS, but it only turns the entire banner and its sides into one solid black section. It seems the background color is being applied over the image, completely covering it rather than sitting behind it. I don’t want to stretch the image to cover the sides—I’d like to keep its original dimensions and aspect ratio. If anyone more skilled than me could find a solution, I’d really appreciate it.

https://doftnoter.se/collections/valentino

Passw: test12345

sample.png
sample.png3573×753 283 KB

Thanks!

2

You can achieve this by wrapping your banner image in a full-width container with a black background, and centering the image inside it without stretching. Make sure the image itself isn’t set to 100% width if you want to maintain its original aspect ratio.

.custom-banner-wrapper {
background-color: black;
text-align: center;
padding: 20px 0; /* optional vertical spacing */
}

.custom-banner-wrapper img {
display: inline-block;
max-width: 100%;
height: auto;
}

3

Hi @entranced

I see you have already made it full-width.

4

Good idea, it works fine. Thanks!