The background image of my website body is responsive on desktop but not on an actual phone

Question

I have made a responsive website which is deployed on heroku. When I use chrome device toolbar to emulate phone viewport, the background image is scalable. But on an actual phone it's not; I just get a static zoomed-out image that occupies only part of the screen. Other than the image, everything else is working responsively.

Here's the CSS for my background image:

body {
  background-image: url('assets/backgroundimage2.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

Possible duplicate of [Responsive web design is working on desktop but not on mobile device](https://stackoverflow.com/questions/14304494/responsive-web-design-is-working-on-desktop-but-not-on-mobile-device) — EternalHour, Oct 08 '19 at 19:25
And when you say the background image is "responsive", what do you mean? — Heretic Monkey, Oct 08 '19 at 19:29
@HereticMonkey Sorry, I meant that background image will resize/crop depending on window size, but that single image will still cover the full viewport. — Asif Hasan, Oct 08 '19 at 20:20
@EternalHour I have the meta tag and the website is working as expected except for the image. — Asif Hasan, Oct 08 '19 at 20:22

score 0 · Answer 1 · answered Oct 08 '19 at 18:48

0

max-width: 100% might be your solution to your problem.This tells your browser that the image shouldn't be larger than a mobile screen.

answered Oct 08 '19 at 18:48

leart morina

31
6

Doesn't it have the same effect as```background-size: cover;```? – Asif Hasan Oct 08 '19 at 21:35
Can you try using max-width maybe it will solve your problem. I'm not sure if there are same; – leart morina Oct 09 '19 at 07:45
No dice. Weirdly enough, the background image is fine on mobile firefox. But chrome mobile is forcing the full image into view and thus, using only part of the viewport. – Asif Hasan Oct 12 '19 at 03:50

score 0 · Answer 2 · answered Oct 12 '19 at 04:13

0

Found my answer here: background-size: cover not working in portrait on Android tablet

For some reason, we have to specify height and minheight of html and body tags at 100%.

answered Oct 12 '19 at 04:13

Asif Hasan

1
1

The background image of my website body is responsive on desktop but not on an actual phone

2 Answers2