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

[entranced]

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

Thanks!

[moshbray · Accepted solution]

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

[entranced]

Good idea, it works fine. Thanks!

[Dan-From-Ryviu]

Hi @entranced 

I see you have already made it full-width.