How to change background image size for mobile view, without changing desktop view settings

Solved

How to change background image size for mobile view, without changing desktop view settings

VertaL1fe
Tourist
10 0 1

 

Hi there,

I am having some trouble with making changes to my website on the debut theme. I have my background image at a perfect size on the desktop view, however once I click the mobile view, the image is enlarged and cuts 75% of the original. I would like to make it so that image/background fits perfectly on the mobile view, without adjusting the settings on the desktop view. 

Any help would be great! Thanks! 

Accepted Solutions (2)
ZestardTech
Shopify Expert
5624 1024 1352

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
div#Hero-hero-1 {
height: 71vw;
}

div#Hero-hero-2 {
height: 72vw;
}

.image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
height: 66vw;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

ZestardTech
Shopify Expert
5624 1024 1352

This is an accepted solution.

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 8 (8)

ZestardTech
Shopify Expert
5624 1024 1352

Hello @VertaL1fe ,

Please share your store URL and Password.
So that I will check and let you know the exact solution here.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
VertaL1fe
Tourist
10 0 1

 

Hi,

website: vertalife.com

password: Shadowkob1

 

ZestardTech
Shopify Expert
5624 1024 1352

This is an accepted solution.

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset >theme.scss.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
div#Hero-hero-1 {
height: 71vw;
}

div#Hero-hero-2 {
height: 72vw;
}

.image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
height: 66vw;
}
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
ZestardTech
Shopify Expert
5624 1024 1352

This is an accepted solution.

Thank you for your response. It's good to know that it's worked for you. Kindly feel free to get back to me if you need any further assistance.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
shilpa_etsy
Shopify Partner
28 0 2

Hello I am facing same issue, can you please please help me ?? I need it urgently my website is published pleaseeeee

shilpa_etsy
Shopify Partner
28 0 2

Helllooooo !! Can you please help me ? pleaseeeeeeeee

ZestardTech
Shopify Expert
5624 1024 1352

Hi @shilpa_etsy 

Ok, please tell me what help you need.

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
dilpreet1
Visitor
1 0 0

THIS IS URGENT. I'm having the same problem. I'm using two gif images for media width above 1290px and below. One's oriented landscape and the other portrait. When I view the site on my phone, the image extends vertically taking the height of the entire page and it extends horizontally to the right, beyond the page. But when I view it on the Shopify editor (mobile view) or the chrome's inspect (mobile view), the image fits perfectly on the page. For the portrait gif I'm using the recommended ratio for the background image from Shopify. I've tried the above code that you have mentioned, it didn't work. Here's my website and the screenshots. Also I'm attaching the snippet of my background image.

 

<style>
  html, body {
    background-image: url("https://cdn.shopify.com/s/files/1/0868/8251/7314/files/Background.gif?v=1719004431") !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
  }

  @media (max-width: 1290px) {
    html, body {
      background-image: url("https://cdn.shopify.com/s/files/1/0868/8251/7314/files/Mobile_Background.gif?v=1719247721") !important;
      background-size: cover !important;
      background-attachment: fixed !important;
      background-repeat: no-repeat !important;
      background-position: center center !important;
    }
  }
</style>

 

 

 

 

Screenshot 2024-06-24 at 1.21.13 PM.pngIMG_32E6860A9F35-1.png