Change size of background image for mobile devices

Store Design
,
1

Screen Shot 2025-01-15 at 3.46.29 PM.png
Screen Shot 2025-01-15 at 3.46.29 PM.png1306×1258 108 KB

Screen Shot 2025-01-15 at 3.46.53 PM.png
Screen Shot 2025-01-15 at 3.46.53 PM.png2098×1072 229 KB

Hey guys,

I am trying to change the size of my background image for my newsletter section for when individuals see my site on their mobile. This is the code I am using to insert the image for my website version but I need to modify it slightly so that the image is smaller for mobile devices. Any ideas? I have the code in the custom CSS section. I uploaded the image I’m talking about for my clarity. Thanks.

.newsletter__wrapper {
padding-bottom: 300px;
}
.newsletter__wrapper {
padding-top: 200px;
}
.newsletter__wrapper {
background-image: url(“https://cdn.shopify.com/s/files/1/0896/4807/1021/files/Untitled_design_4.png?v=1736985954”);
background-size: auto;
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll !important;
}

2

Hi @hjth96

Please share the link of your store and the screenshot where you want to make the edit

Best,

Daisy

3

I think you should create a separate background image for mobile

.newsletter__wrapper {
	background-image: url("https://cdn.shopify.com/s/files/1/0896/4807/1021/files/Untitled_design_4_mobile_version.png?v=1736985954");
	background-size: auto;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: scroll !important;
}
@media (min-width: 768px) {
	background-image: url("https://cdn.shopify.com/s/files/1/0896/4807/1021/files/Untitled_design_4.png?v=1736985954");
}

done

4

Here is the link: https://ninelivesdesigns.co/pages/subscribe. The screenshots are provided in the original post. Thanks!

5

Unfortunately, I’m getting this error: “Your custom CSS has reached the size limit of 500 characters. Remove some CSS to save your changes.” so that won’t work. Any advice? Thanks!

6

Hi @hjth96

You can try to add this CSS code on the theme.liquid when the custom CSS reaches the limit:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the code at the bottom of the file → Save

7

I can’t access your website because of the password.

VN_Dev_0-1736994406462.png
VN_Dev_0-1736994406462.png1239×607 89.4 KB

Contact my email. I will support you for free. vndev.analytics@gmail.com

8

Thank you this helped! I had to insert the code in the newsletter.css component. This is the code I ended up putting in if anyone else ever needs it:

.newsletter__wrapper{padding-bottom:300px;padding-top:200px;background-image:url(“https://cdn.shopify.com/s/files/1/0896/4807/1021/files/Untitled_design_4.png?v=1736985954”);background-size:auto;background-position:center center;background-repeat:no-repeat;background-attachment:scroll!important}
@media only screen and (max-width:600px){.newsletter__wrapper{padding-bottom:150px;padding-top:150px;background-image:url(“https://cdn.shopify.com/s/files/1/0896/4807/1021/files/Untitled_design_5.png?v=1736993626”);background-size:auto;background-position:center center;background-repeat:no-repeat;background-attachment:scroll!important}}

9

Hi @hjth96

Please share the store password too so I can check it for you :heart:

Best,

Daisy