Help to fit background image on mobile-tablet

Site URL: https://www.entropiacaffe.it/

I have been trying to resize 'background-images' on Home-page (not other pages because i would like to make change only on homepage) on mobile/tablet in 7.1. 

As you can see from my attached files, the image is not properly fit on mobile and tablet. 
I would like to shrink my background image, to fits in. 

Is here anyone can help me? I tried to copy and paste some css codes from around, but still i didnt find nothing works properly.

My url is 
https://www.entropiacaffe.it/

That is my css code under>design>custom css if can help you in some way. 

This code at moment I do not want to change because is working properly for what i would like as final result.

/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
.sqs-block-image {
width: 90%;
margin: 0 auto;
}
 .sqs-block-product {
width: 70%;
margin: 0 auto;
}
/* Insert Code for Mobile Above This Line */
}
h3 {
    color: #ad9961 !important;
}
h4 {
    color: #ad9961 !important;
}

/* related product 4 items */
.ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+5) {
    display: none;
}

/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 50%;
}
}

1 - That is how my image appear on desktop and i would like that  appear on mobile and tablet.  The compromise can be to adapt the word and button (make it bigger and readable)

2- That is how appear on tablet. The image sides are cut.

3- That is how appear on mobile. Side cut it an in this case even the quality of image  looks lower

Thanks in any case

Benito

11 hours ago, Benito said:

Site URL: https://www.entropiacaffe.it/

I have been trying to resize 'background-images' on Home-page (not other pages because i would like to make change only on homepage) on mobile/tablet in 7.1. 

As you can see from my attached files, the image is not properly fit on mobile and tablet. 
I would like to shrink my background image, to fits in. 

Is here anyone can help me? I tried to copy and paste some css codes from around, but still i didnt find nothing works properly.

My url is 
https://www.entropiacaffe.it/

That is my css code under>design>custom css if can help you in some way. 

This code at moment I do not want to change because is working properly for what i would like as final result.

/* CSS FOR TABLET AND MOBILE */
@mobile: ~"only screen and (max-width: 640px)";
@tablet: ~"only screen and (min-width: 641px) and (max-width: 949px)";

/* CSS FOR TABLET */
@media @tablet {
/* Insert Code for Tablet Below This Line*/

/* Insert Code for Tablet Above This Line */
}

/* CSS FOR MOBILE */
@media @mobile {
/* Insert Code for Mobile Below This Line*/
.sqs-block-image {
width: 90%;
margin: 0 auto;
}
 .sqs-block-product {
width: 70%;
margin: 0 auto;
}
/* Insert Code for Mobile Above This Line */
}
h3 {
    color: #ad9961 !important;
}
h4 {
    color: #ad9961 !important;
}

/* related product 4 items */
.ProductItem-relatedProducts .list-grid .grid-item:nth-child(n+5) {
    display: none;
}

/* 2 Column Product Grid */
@media only screen and (max-width:640px) {
.products .list-grid {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.products .grid-item {
width: 50%;
}
}

1 - That is how my image appear on desktop and i would like that  appear on mobile and tablet.  The compromise can be to adapt the word and button (make it bigger and readable)

2- That is how appear on tablet. The image sides are cut.

3- That is how appear on mobile. Side cut it an in this case even the quality of image  looks lower

 

Thanks in any case

Benito

 

I think you should design new image for smaller screen and use media breakpoint css to replace the background on mobile

Thank you bangank36 for your answer. 

How can design new image for smaller screen ? you mean the size in px?  If yes how bigger should be the image in px to get better result? Thanks again