change main parralax image to background image for mobile

Shapely
1

Hi there,

I need to make the main image on this website change to a background image when viewed on mobile, so that the logo appears in full on the screen. Can you please assist? I have attached a screenshot of how the site looks on mobile.

Thanks,
S

2

hey there

Please add this CSS in appearance - customize - additional CSS

#shapely_home_parallax-2 {
background-image: url(http://secureservercdn.net/198.71.233.106/55s.86a.myftpupload.com/wp-content/uploads/2019/09/EC-FARMS-LOGO-SPLASHsmall.jpg);
background-size: cover;
background-position: center;
}

Thanks!
Colorlib Support Team

3

Thanks! I have input this code but I am still having the same issue. The image looks a bit better on mobile than it was before, but unfortunately the sides of the logo are still slightly cropped.

I have also tried out the following option but that didn’t work either:

#shapely_home_parallax-2 {

background-image: url(http://secureservercdn.net/198.71.233.106/55s.86a.myftpupload.com/wp-content/uploads/2019/09/EC-FARMS-LOGO-SPLASHsmall.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

Any other suggestions?

4

hey there

Unfortunately, there is no other way with this image, if you have a different image just for mobile screens give me the links and i will create custom CSS just for your mobile phone

5

Thanks very much! Here is the image. It has been resized to 600x434px, let me know if that is the incorrect size and I can re-do.

http://ecfarms.ca/wp-content/uploads/2019/11/EC-FARMS-LOGO-SPLASHmobile.jpg

6

Hey there

Please try this code:

@media only screen and (max-width: 600px) {
#shapely_home_parallax-2 {
background-image: url(http://ecfarms.ca/wp-content/uploads/2019/11/EC-FARMS-LOGO-SPLASHmobile.jpg);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}

7

Thanks for the code! Unfortunately the problem still isn’t fixed – now when i open the page, this image initially loads as contain, then quickly switches to cover. Is there maybe some other code built in that overrides these settings?

I tried replacing the image file with a vertical image, but that hasn’t solved it either.

Thanks,
S

8

Hey there

change your code to this:

@media only screen and (max-width: 600px){
#shapely_home_parallax-2 {
background-image: url(http://secureservercdn.net/198.71.233.106/55s.86a.myftpupload.com/wp-content/uploads/2019/11/EC-FARMS-LOGO-SPLASHlogovertical.jpg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

and please note, logo is still not the best for this case, it must be smaller than this

9

Hi there,

Thanks for your patience on this. Unfortunately the code you’ve just provided isn’t working to fix the issue either. I have gone back and re-sized the image to 16:9 to see if that helped, but it’s still not working. New image dimensions are 394x700px, this is the image I am now using:

http://ecfarms.ca/wp-content/uploads/2019/11/EC-FARMS-LOGO-SPLASHlogovertical700.jpg

Is there an override somewhere else in the theme that prevents this particular parallax section from being mobile-responsive?

10

Good morning

thank you too :slight_smile:

Previous code is working right now as it should work, under 600px image is changed and your image for mobile devices is displayed, unfortunately, there is no other method :slight_smile: code is working, my suggestion is to work with the image, make it a little bit more mobile-friendly, reduce logo width

11

Hi there,

I have tried to change the logo size and didn’t see any change in how it looks on mobile. So I changed it to a completely different image to test if the image changed.

The files attached show the new mobile test image, and a screenshot showing this image only as a tiny border below the parallax section. The code seems to be defaulting to an overlay of the main parallax image instead of the test image.

Can you advise how to change this?

Thanks again
S

12

sorry here is the test image:

http://ecfarms.ca/wp-content/uploads/2019/09/qtq50-UqmSFi.jpeg

13

Hey there

It’s working for me, please clear cache and check again, it shows different images for desktop and mobile devices