Image

Image Settings

Set the image background and its styling properties.

• Image: Upload your chosen image (e.g., yerb.webp).

• Image Border Radius: 10px Rounds the corners of the image.

• Image Content Position Horizontal (Desktop): 50% Controls horizontal content alignment over the image.

• Image Content Position Vertical (Desktop): 50% Controls vertical alignment for text on desktop.

---

Text Settings

Customize the overlay text that appears on top of the image.

• Image Text Description: NIKE SPRING SEASON The headline or message that appears over the image.

• Font Size (Desktop): 23px

• Font Size (Mobile): 17px

• Text Color: #FFFFFF

• Text Background Color: #686868

• Text Background Opacity: 19%

• Enable Text Background: Toggle ON to display a background behind the text for contrast.

• Text Horizontal Position (Desktop): 5%

• Text Horizontal Position (Mobile): 26%

• Text Background Border Radius: 8px

---

📐 Layout Settings

Control section layout, spacing, and responsiveness.

• Enable Full Width Section: Toggle ON to span edge-to-edge across the screen.

• Content Width Limit: 1300px Maximum width inside the section container.

• Section Padding Top (Desktop): 50px

• Section Padding Bottom (Desktop): 50px

• Left and Right Padding (Desktop): 15px

• Image Height (Desktop): 70vh Minimum height of the image section on larger screens.

---

Mobile Settings

Responsive layout for mobile devices.

• Section Padding Top (Mobile): 40px

• Section Padding Bottom (Mobile): 40px

• Left and Right Padding (Mobile): 20px

• Image Height (Mobile): 50vh

• Image Horizontal Content Position (Mobile): 50%

• Image Vertical Content Position (Mobile): 50%

---

Advanced Media Settings

Control image/video spacing and media type.

• Image Top Margin: 0px

• Image Bottom Margin: 0px

• Use Video Instead of Image: Toggle ON to replace the image with a background video.

• Video URL: Paste an MP4 video link for dynamic background.

---

Customization

• Display Section On: All Devices Control visibility on desktop, tablet, or mobile.

• Lazyload Images: Enable to delay loading until the image is in view (improves page speed).

• Custom CSS: Add extra styles if needed for advanced control.

---

This Image Overlay Section gives you creative control to display a bold visual message with overlaid text, ideal for seasonal collections, announcements, or branding moments. Adjust the layout, typography, colors, and responsiveness for a polished experience across devices.