How do I crop image banner overlay to only the text body?

Store Design
,
1

Hi Everyone,

I’d like to constrain the overlay on an image banner to only the text body. Some of my text is hard to see with some of the images. For style reasons I don’t want to change the text color or the font and I’d like to avoid darkening the entire image banner with the overlay.

From this:

mikmerk_0-1718553859375.png
mikmerk_0-1718553859375.png1194×329 518 KB

to this:

mikmerk_1-1718553905921.png
mikmerk_1-1718553905921.png1196×327 514 KB

Thanks for whatever info you can give.

2

Hi @mikmerk , Can you kindly share your store link with us? We will check it and suggest you a solution if possible.

3

To address this issue on Shopify where you want to constrain the overlay on an image banner to only the text body without darkening the entire image, you can consider the following solution:

  1. Create a Transparent Gradient Overlay:
    Instead of a solid color overlay that darkens the entire banner, you can create a gradient overlay that starts from transparent at the top and gradually becomes more opaque towards the bottom where your text is located. This allows the image to remain visible but enhances the readability of the text.

Here’s an example of how you can implement this using CSS:

.banner-container {
position: relative;
display: inline-block; /* or use block if needed */
}

.banner-image {
display: block;
width: 100%; /* Adjust as needed */
height: auto; /* Maintain aspect ratio */
}

.text-overlay {
position: absolute;
bottom: 20px; /* Adjust to position your text appropriately */
left: 20px; /* Adjust to position your text appropriately */
width: calc(100% - 40px); /* Adjust based on padding or margins */
padding: 10px; /* Adjust as needed */
color: #ffffff; /* Text color */
font-size: 18px; /* Font size */
}

.overlay-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.5)); /* Adjust opacity as needed */
}
  1. Apply the Overlay in Shopify:
  • Insert your banner image and text content within a container (banner-container).
  • Ensure your text content (text-overlay) is positioned appropriately over the image.
  • Use the overlay-gradient class to create the gradient overlay effect. Adjust the gradient’s opacity (rgba(0,0,0,0.5)) to achieve the desired balance between text visibility and image clarity.
  1. Adjustment and Testing:
  • Fine-tune the gradient overlay’s opacity and positioning to ensure your text remains readable while preserving the visual appeal of the image.
  • Test across different devices and screen sizes to ensure the overlay works effectively without compromising the design integrity.

By implementing a transparent gradient overlay, you maintain the aesthetic integrity of your image banner while ensuring readability of the text, thus achieving your styling goals without altering text color or font.

I hope this would be able to help and If you need any further assistance send a Dm.

4

Hi @mikmerk

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.banner__box {

background: #00000066 !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly