I am seeking to replicate a design similar to that of Fantastical's website (https://flexibits.com/fantastical), where the edge of a screenshot extends beyond the page boundary. As the user resizes the window, more of the screenshot becomes visible. Additionally, when the width is reduced significantly, the screenshot also shrinks in size. To better convey my idea, here are some visuals:
https://i.stack.imgur.com/nInhI.png
https://i.stack.imgur.com/9WMuk.jpg
https://i.stack.imgur.com/7UOFq.png
Below is the code I have come up with; I hope it proves useful to others:
&.accounts {
display: block;
margin: 0 auto;
height: auto;
.text {
width: auto;
padding: 0;
text-align: center;
}
.image {
width: auto;
height: 300px;
background-image: url('/assets/scrn-accounts.png');
background-repeat: no-repeat;
background-position: 100px 0;
background-size: cover;
margin: 20px 0;
}
}