SRE Hero Banner HD & 4K Setup
Active on HomepageUltra Sharp Resolution
Powered by 3072 × 1137 (4K super-sampled) and 2048 × 758 (2K HD) responsive image srcset.
Crystal Clear Details
Text (“Safer Handling. Stronger Operations.”), 4 Badges, and all 3 equipment machines render razor-sharp without blur.
Seamless Interaction
Fully clickable to dealer-enquiry.html with smooth hover contrast and zero layout shift.
HTML Markup (Ready to Copy)
<!-- SRE Official Ultra HD Hero Banner Section -->
<section class="sre-home-banner-section">
<div class="sre-banner-image-container">
<a href="/dealer-enquiry/" class="sre-banner-link" title="SRE Material Handling Equipment - Request a Quote / Dealer Enquiry">
<picture>
<source media="(min-width: 1200px)" srcset="/sre-hero-banner-4k.png">
<source media="(min-width: 600px)" srcset="/sre-hero-full-banner-hd.png">
<img src="/sre-hero-banner-4k.png"
srcset="/sre-hero-full-banner-hd.png 2048w, sre-hero-banner-4k.png 3072w"
alt="SRE Material Handling - Safer Handling. Stronger Operations. Move Smarter Grow Faster"
class="sre-banner-image"
loading="eager"
fetchpriority="high"
decoding="async"
width="3072"
height="1137">
</picture>
</a>
</div>
</section>
CSS Stylesheet (Ready to Copy)
/* SRE Full-Width Ultra HD Hero Banner Styles */
.sre-home-banner-section {
width: 100%;
background: #ffffff;
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
border-bottom: 3.5px solid #f6b100;
}
.sre-banner-image-container {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 0;
display: block;
position: relative;
overflow: hidden;
background: #ffffff;
line-height: 0;
}
.sre-banner-link {
display: block;
width: 100%;
line-height: 0;
cursor: pointer;
text-decoration: none;
}
.sre-banner-image {
width: 100%;
height: auto;
max-height: none;
display: block;
object-fit: cover;
object-position: center;
image-rendering: -webkit-optimize-contrast;
image-rendering: high-quality;
filter: contrast(103%) saturate(104%) brightness(101%);
transition: filter 0.3s ease;
}
.sre-banner-image:hover {
filter: contrast(105%) saturate(107%) brightness(102%);
}