<!-- Dark Banner with background image -->
<!-- Start of Section -->
<section class="qld__banner qld__banner__advanced qld__banner--dark qld__banner--breadcrumbs qld__banner--has-hero" id="banner-advanced-158564">
<!-- Responsive background image style -->
<style>
@media (min-width:699px) {
#banner-advanced-158564 {
background-image: url(https://www.design-system.health.qld.gov.au/__data/assets/image/0014/110273/Background-Image-Dark.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position-x: center;
}
}
@media (min-width:1312px) {
#banner-advanced-158564 {
min-height: auto;
}
}
</style>
<!-- Breadcrumb for mobile -->
<nav class="qld__breadcrumbs qld__breadcrumbs--dark-alt qld__banner__breadcrumbs qld__banner__breadcrumbs--mobile" aria-label="breadcrumb">
<ul class="qld__link-list qld__link-list--inline">
<li>
<a href="javascript:void(0)">Banners</a>
</li>
</ul>
</nav>
<!-- Main content container -->
<div class="container-fluid">
<div class="qld__banner__wrapper">
<div class="qld__banner__main row">
<!-- Hero Section -->
<div class="qld__banner__hero col-xs-12 col-md-7 col-lg-5 col-xl-4">
<div class="qld__banner__image qld__banner__image--mobile-hide" style="background-image: url('./?a=');"></div>
<div class="qld__banner__image qld__banner__image--background qld__banner__image--desktop-hide" style="background-image: url('https://www.design-system.health.qld.gov.au/__data/assets/image/0025/158632/Mobile_backround_example.png');"></div>
</div>
<!-- Banner Content -->
<div class="qld__banner__content col-xs-12 col-md-8 col-lg-8">
<!-- Breadcrumb for desktop -->
<nav class="qld__breadcrumbs qld__breadcrumbs--dark qld__banner__breadcrumbs qld__banner__breadcrumbs--desktop" aria-label="breadcrumb">
<ul class="qld__link-list qld__link-list--inline">
<li>
<a href="javascript:void(0)">Home</a>
</li>
<li>
<a href="javascript:void(0)">Components</a>
</li>
<li>
<a href="javascript:void(0)">Banners</a>
</li>
<li aria-current="page">
Background image
</li>
</ul>
</nav>
<!-- Banner Title -->
<h1>Background image</h1>
<!-- Banner Body -->
<div class="qld__banner__content--body qld__abstract">
<p>Dark colour with background image</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End of Section -->
Last updated: March 2024