you can add another value to background-size: contain; such as background-size: 100px 200px, contain; or background-size: 150%, contain; to resize the new image, but it'll get cut off at the edges of the image box rather than hovering over it. the whole layout needs to use overflow: hidden; in order to prevent other elements from bleeding out of the box, so there's nothing you can do to get around that, unless you were to add the image as an <img> outside of the rest of the code instead and position it manually (similar to how i did the pagedoll in this code), but it might be a pain to position it responsively and without causing the whole page to scroll horizontally.