Customize Image Banner

[maisongreen_03]

Hi,

How can I achieve this green box with the image banner section? Ideally with the custom CSS since I only want this format for this specific component.

Page link: https://maisonmidori.com/

[rajweb]

Hey @maisongreen_03 ,

To achieve that green overlay box with the text on top of the banner image for a specific section only

Here’s how you can implement this:

Follow these steps:

1. Identify the Section’s ID:

2. Go to the page editor on Shopify where this banner is located.

3. Inspect the section by right-clicking the element (in Chrome/Firefox) and selecting Inspect.

4. Find the section’s unique ID (like #shopify-section-xyz or .banner-section).

Custom CSS Approach:

1. dd the following CSS to your theme’s CSS or within the section’s custom CSS setting if available.
   You can limit this style to just this section by using its unique class or ID.

/* Apply the green overlay to the specific banner section */
#your-section-id {
  position: relative;
  height: 500px; /* Adjust the height as needed */
  background: url('YOUR-IMAGE-URL') no-repeat center center;
  background-size: cover;
}

#your-section-id::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(26, 51, 40, 0.6); /* Green overlay with transparency */
  z-index: 1;
}

/* Style for the text content inside the banner */
#your-section-id .banner-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  z-index: 2;
  font-family: 'Your-Font-Family', sans-serif;
}

#your-section-id .banner-content h1 {
  font-size: 2rem;
  margin: 0;
}

#your-section-id .banner-content p {
  font-size: 1rem;
}

#your-section-id .banner-content a {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background-color: white;
  color: black;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
}

HTML Structure:

If you need to tweak the HTML inside the specific section, use this example structure:

  

    # Tenshi Collection
    

Give customers details about the banner image(s) or content on the template.

    Show Now
  

This will ensure the green overlay and text are specific only to the banner section you want to target. Let me know if you need further adjustments!

If I was able to help you, please don’t forget to Like and mark it as the Solution!

Best Regard,

Rajat Sharma

[Moeed]

Hey @maisongreen_03

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

RESULT:

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Kyle_liu]

Hi @maisongreen_03

The background-color needs to be replaced with the actual color

.banner__content{
  max-width: 100%;
  background-color: rgba(65, 64, 44, 0.5);
  height: 214px;
}
.banner__box {
  left: 5%;
}