We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more

Customize Image Banner

Customize Image Banner

maisongreen_03
Tourist
10 0 5

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/

Screenshot 2024-10-21 at 1.06.59 PM.png

Replies 3 (3)

rajweb
Shopify Partner
845 71 161

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:

 

<div id="your-section-id">
  <div class="banner-content">
    <h1>Tenshi Collection</h1>
    <p>Give customers details about the banner image(s) or content on the template.</p>
    <a href="#">Show Now</a>
  </div>
</div>

 

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

Rajat | Shopify Expert Developer
Need a reliable developer for your next Shopify project? Let's connect!
Email: rajat.shopify@gmail.com
Portfolio: rajatweb.dev
Your one-stop partner for Shopify development, SEO, and performance. Let’s grow your store together!

Moeed
Shopify Partner
7764 2082 2568

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 </body> tag

<style>
.banner__box.content-container.content-container--full-width-mobile.color-scheme-1.gradient {
    width: 100% !important;
    background: #535e4de0 !important;
    max-width: 100% !important;
}
</style>

RESULT:

Moeed_0-1729488934821.png

 

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

 

Best Regards,
Moeed

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Custom Design | Advanced Coding | Store Modifications


Kyle_liu
Shopify Partner
441 55 80

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

 

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to contact me Email Me Buy Me A Coffee