← Back to Sections
Full Width Image
A versatile full-width media section designed to create stunning visual impact across your entire site width. Perfect for hero banners, promotional imagery, brand showcases, or any content that needs maximum visual presence without distractions.
Key Features:
- Support for both images and videos with separate desktop and mobile media options
- Custom height controls for desktop, tablet, and mobile with responsive breakpoints
- Opacity controls for artistic overlay effects on both images and videos
- Comprehensive padding controls for perfect spacing on all device sizes
- Optional border styling with customizable thickness and colors
- Flexible color system: use theme colors or apply custom background and text colors
- Auto-optimized image loading with lazy/eager options for performance
- Professional video support with autoplay, loop, and muted settings
Perfect for: Hero sections, brand storytelling, product showcases, promotional banners, visual dividers, or any content requiring full-width visual impact with precise responsive control.
{%- style -%}
.section-{{ section.id }} {
{% if section.settings.use_custom_colors %}
background-color: {{ section.settings.background_color }};
color: {{ section.settings.text_color }};
{% else %}
color: rgb(var(--color-foreground));
{% endif %}
padding-top: {{ section.settings.desktop_padding_top }}px;
padding-bottom: {{ section.settings.desktop_padding_bottom }}px;
padding-left: {{ section.settings.desktop_padding_horizontal }}px;
padding-right: {{ section.settings.desktop_padding_horizontal }}px;
{% if section.settings.top_border_thickness > 0 %}
border-top: {{ section.settings.top_border_thickness }}px solid {{ section.settings.border_color }};
{% endif %}
{% if section.settings.bottom_border_thickness > 0 %}
border-bottom: {{ section.settings.bottom_border_thickness }}px solid {{ section.settings.border_color }};
{% endif %}
}
.section-{{ section.id }} .bc-image-hero-container {
position: relative;
width: 100%;
}
.section-{{ section.id }} .bc-image-hero {
width: 100%;
{% if section.settings.use_custom_height %}
height: {{ section.settings.desktop_height }}px;
object-fit: cover;
{% else %}
height: auto;
{% endif %}
display: block;
opacity: {{ section.settings.desktop_image_opacity }}%;
}
.section-{{ section.id }} .bc-image-hero-mobile {
width: 100%;
{% if section.settings.use_custom_height %}
height: {{ section.settings.mobile_height }}px;
object-fit: cover;
{% else %}
height: auto;
{% endif %}
display: none;
opacity: {{ section.settings.mobile_image_opacity }}%;
}
.section-{{ section.id }} video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
opacity: {{ section.settings.video_opacity }}%;
}
/* Tablet styles (768px to 991px) */
@media screen and (max-width: 991px) and (min-width: 768px) {
.section-{{ section.id }} {
padding-left: {{ section.settings.tablet_padding_horizontal }}px;
padding-right: {{ section.settings.tablet_padding_horizontal }}px;
}
{% if section.settings.use_custom_height %}
.section-{{ section.id }} .bc-image-hero {
height: {{ section.settings.tablet_height }}px;
object-fit: cover;
}
.section-{{ section.id }} .bc-image-hero-mobile {
height: {{ section.settings.tablet_height }}px;
object-fit: cover;
}
{% endif %}
}
/* Mobile styles (767px and below) */
@media screen and (max-width: 767px) {
.section-{{ section.id }} {
padding-left: {{ section.settings.mobile_padding_horizontal }}px;
padding-right: {{ section.settings.mobile_padding_horizontal }}px;
}
{% if section.settings.use_custom_height %}
.section-{{ section.id }} .bc-image-hero {
height: {{ section.settings.mobile_height }}px;
object-fit: cover;
}
.section-{{ section.id }} .bc-image-hero-mobile {
height: {{ section.settings.mobile_height }}px;
object-fit: cover;
}
{% endif %}
{% if section.settings.mobile_image != blank %}
.section-{{ section.id }} .bc-image-hero {
display: none;
}
.section-{{ section.id }} .bc-image-hero-mobile {
display: block;
}
{% endif %}
}
/* Mobile video container responsive styles */
@media screen and (max-width: 767px) {
.section-{{ section.id }} .bc-mobile-video-container {
display: block !important;
}
{% if section.settings.mobile_video != blank %}
.section-{{ section.id }} .bc-video-hero {
display: none;
}
{% endif %}
}
{%- endstyle -%}
<div class="section-{{ section.id }}{% unless section.settings.use_custom_colors %} color-{{ section.settings.color_scheme }}{% endunless %}">
{% comment %} Designed and Developed by Bungalow Creative. Get sections like these at The Section Studio https://bungalowcreative.co/pages/the-section-studio {% endcomment %}
<div class="bc-image-hero-container">
{% if section.settings.desktop_video != blank %}
{{
section.settings.desktop_video
| video_tag: controls: false, autoplay: true, loop: true, muted: true, preload: 'auto', class: 'bc-video-hero'
}}
{% elsif section.settings.desktop_image != blank %}
<img
src="{{ section.settings.desktop_image | image_url }}"
alt="{{ section.settings.desktop_image_alt | default: 'Full width image' }}"
loading="{{ section.settings.image_loading }}"
sizes="(max-width: 2700px) 100vw, 2700px"
class="bc-image-hero"
>
{% endif %}
{% if section.settings.mobile_video != blank %}
<div class="bc-mobile-video-container" style="display: none;">
{{
section.settings.mobile_video
| video_tag:
controls: false,
autoplay: true,
loop: true,
muted: true,
preload: 'auto',
class: 'bc-video-hero-mobile'
}}
</div>
{% elsif section.settings.mobile_image != blank %}
<img
src="{{ section.settings.mobile_image | image_url }}"
loading="{{ section.settings.image_loading }}"
sizes="100vw"
alt="{{ section.settings.mobile_image_alt | default: 'Full width image mobile' }}"
class="bc-image-hero-mobile"
>
{% endif %}
</div>
</div>
{% schema %}
{
"name": "BC Full Width Image",
"settings": [
{
"type": "header",
"content": "Colors"
},
{
"type": "color_scheme",
"id": "color_scheme",
"label": "Color Scheme",
"default": "scheme-1"
},
{
"type": "checkbox",
"id": "use_custom_colors",
"label": "Use custom colors instead of a Dawn color scheme",
"default": false
},
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#ffffff"
},
{
"type": "color",
"id": "text_color",
"label": "Text Color",
"default": "#000000"
},
{
"type": "color",
"id": "border_color",
"label": "Border Color",
"default": "#000000"
},
{
"type": "header",
"content": "Section Settings"
},
{
"type": "range",
"id": "desktop_padding_top",
"label": "Desktop Top Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "desktop_padding_bottom",
"label": "Desktop Bottom Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "desktop_padding_horizontal",
"label": "Desktop Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "tablet_padding_horizontal",
"label": "Tablet Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "mobile_padding_horizontal",
"label": "Mobile Horizontal Padding",
"min": 0,
"max": 150,
"step": 5,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "top_border_thickness",
"label": "Top Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "range",
"id": "bottom_border_thickness",
"label": "Bottom Border Thickness",
"min": 0,
"max": 20,
"step": 1,
"unit": "px",
"default": 0
},
{
"type": "checkbox",
"id": "use_custom_height",
"label": "Use custom height instead of auto-adjusting to image",
"default": false,
"info": "Enable this to set specific heights for different screen sizes"
},
{
"type": "range",
"id": "desktop_height",
"label": "Desktop Height",
"min": 100,
"max": 1000,
"step": 10,
"unit": "px",
"default": 400,
"info": "Custom height for desktop screens (992px and up)"
},
{
"type": "range",
"id": "tablet_height",
"label": "Tablet Height",
"min": 100,
"max": 800,
"step": 10,
"unit": "px",
"default": 350,
"info": "Custom height for tablet screens (768px to 991px)"
},
{
"type": "range",
"id": "mobile_height",
"label": "Mobile Height",
"min": 100,
"max": 600,
"step": 10,
"unit": "px",
"default": 300,
"info": "Custom height for mobile screens (767px and below)"
},
{
"type": "header",
"content": "Media"
},
{
"type": "image_picker",
"id": "desktop_image",
"label": "Desktop Image",
"info": "Recommended: High resolution image for desktop displays"
},
{
"type": "image_picker",
"id": "mobile_image",
"label": "Mobile Image (Optional)",
"info": "If no mobile image is uploaded, the desktop image will be used on mobile devices"
},
{
"type": "video",
"id": "desktop_video",
"label": "Desktop Video (Optional)",
"info": "Video takes precedence over desktop image if both are uploaded"
},
{
"type": "video",
"id": "mobile_video",
"label": "Mobile Video (Optional)",
"info": "Video takes precedence over mobile image if both are uploaded"
},
{
"type": "text",
"id": "desktop_image_alt",
"label": "Desktop Image Alt Text",
"placeholder": "e.g. Full width hero image",
"info": "Important for accessibility and SEO"
},
{
"type": "text",
"id": "mobile_image_alt",
"label": "Mobile Image Alt Text",
"placeholder": "e.g. Full width hero image mobile",
"info": "Important for accessibility and SEO"
},
{
"type": "range",
"id": "desktop_image_opacity",
"label": "Desktop Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "mobile_image_opacity",
"label": "Mobile Image Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "range",
"id": "video_opacity",
"label": "Video Opacity",
"min": 10,
"max": 100,
"step": 5,
"unit": "%",
"default": 100
},
{
"type": "select",
"id": "image_loading",
"label": "Image Loading",
"options": [
{
"value": "eager",
"label": "Eager"
},
{
"value": "lazy",
"label": "Lazy"
}
],
"default": "eager",
"info": "Eager loads images immediately, Lazy loads when in viewport"
}
],
"presets": [
{
"name": "BC Full Width Image"
}
]
}
{% endschema %}
