<div class="ad-takeover-container">
<a href="#">
<div class="ad-takeover-header">
<picture>
<source srcset="/assets/images/ads/takeover-header.jpg" media="(min-width: 971px)">
<source srcset="/assets/images/ads/takeover-header-medium.jpg" media="(min-width: 600px)">
<img src="/assets/images/ads/takeover-header-small.jpg" class="ad-takeover__image-header" alt="takeover ad placeholder alt" />
</picture>
</div>
<div class="ad-takeover">
<img src="/assets/images/ads/takeover.jpg" class="ad-takeover__image" alt="takeover ad placeholder alt" />
</div>
</a>
</div>
<div class="ad-takeover-container">
<a href="#">
<div class="ad-takeover-header">
<picture>
<source srcset="/assets/images/ads/{{image-header.large}}" media="(min-width: 971px)">
<source srcset="/assets/images/ads/{{image-header.medium}}" media="(min-width: 600px)">
<img src="/assets/images/ads/{{image-header.small}}" class="ad-takeover__image-header" alt="{{image-alt}}" />
</picture>
</div>
<div class="ad-takeover">
<img src="/assets/images/ads/{{image}}" class="ad-takeover__image" alt="{{image-alt}}" />
</div>
</a>
</div>
{
"image-header": {
"small": "takeover-header-small.jpg",
"medium": "takeover-header-medium.jpg",
"large": "takeover-header.jpg"
},
"image": "takeover.jpg",
"image-alt": "takeover ad placeholder alt"
}
.ad-takeover-container {
position: relative;
height: auto;
overflow: hidden;
}
.ad-takeover-header {
position: relative;
left: 50%;
width: 100%;
min-width: 1460px;
z-index: 1;
background: #ff3e99; // Nonstandard color for takeover demo purposes.
transform: translateX(-50%);
}
.ad-takeover__image-header {
margin: 0 auto;
}
.ad-takeover {
position: fixed;
margin-top: -100vh;
padding-top: 100vh;
left: 50%;
width: 100%;
min-width: 1460px; // Container width + (160px side x 2)
height: 100%;
background: #ff3e99;
transform: translateX(-50%);
}
.ad-takeover__image {
margin: 0 auto;
}
.contain--takeover {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
max-width: 1140px;
background: $color-white;
}
The wallpaper takeover ad can be demoed here: wallpaper takeover.
The specs for the takeover ad are:
1460x596px with visible ad space of 160px on each side.300x50px600x94px1460x94px