Replacing home page image in CSS to scale properly on mobile

Site URL: http://www.ghostvintage.com

Hi Squarespace community!

I would love some help in figuring out my final issue with my website that I'm trying to tweak. 

The existing image on the main page is not the correct orientation and dimensions to scale effectively down to mobile, the texts becomes tiny. I'd love to be able to have that image replaced with a properly scaled image on mobile.

Is there a CSS code I could potentially use so that when mobile users view the site it shows a properly scaled image (replaces with a new, separate header that I would create)?

Do you want to increase text on only mobile? If yes, I can give the code

@tuanphan The text is a part of the image, so just trying to figure out if there's a way to replace the image entirely wit ha mobile formatted image for mobile.

On 5/8/2020 at 11:59 PM, jessglistening said:

@tuanphan The text is a part of the image, so just trying to figure out if there's a way to replace the image entirely wit ha mobile formatted image for mobile.

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1587826916398_5523 figure {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/artboard-1-.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
div#block-yui_3_17_2_1_1587826916398_5523 figure img {
    visibility: hidden;
}
}