background-size: cover not working on mobile screens

Question

I'm trying to have a background-image cover the entire viewport for mobile devices for my React project.

model: iPhone 11
os: 16.5.1

I've noticed 2 issues:

1)

When I set the background-color of a <body> tag => it covers the entire screen


@media screen and (max-width: 450px) {
  body {
    background-color: blue;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 100%;
    overflow: hidden;

  }
}

BUT, when I use a background-image to set the background it does not


@media screen and (max-width: 450px) {
  body {
    background-color: blue;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    height: 100%;
    overflow: hidden;

  }
}

When I try to set any background property, for any sort of child element of the <body> tag to cover the entire screen => it doesn't work

child div with a background-color

@media screen and (max-width: 450px) {
  body {
    background-color: blue;
  }
}

#app {
  background-color: red;
  height: 100vh;
  width: 100vw;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
}

-child div with abackground-image

@media screen and (max-width: 450px) {
  body {
    background-color: blue;
  }
}

#app {
  background-image: url("https://res.cloudinary.com/ducqdbpaw/image/upload/v1685200227/FABIO/2017/Sanzogni_Significance_14_36_x_48_silver_leaf_oil_on_canvas_mouygv.jpg")
  height: 100vh;
  width: 100vw;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
}

I've re-adjusted my css rules many times according to some sources I've found:

background-size: cover not working on iOS

=>

@media screen and (max-width: 450px) {
  body {
    background-attachment: scroll;
    background-image: url("image url");
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    overflow: hidden;
  }
}

... same issue

https://gist.github.com/yang-wei/9114967

=>

@media screen and (max-width: 450px) {
  body {
    background-image: url("https://res.cloudinary.com/ducqdbpaw/image/upload/v1685200227/FABIO/2017/Sanzogni_Significance_14_36_x_48_silver_leaf_oil_on_canvas_mouygv.jpg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    overflow: hidden;
  }
}

..shows no image

Ultimately, I want this image to cover the entire background. Either through the <body> tag or the <App/> tag for my React project. Any ideas?

the html of my app

Reproducible example:

https://codesandbox.io/s/sad-architecture-s4s96n?file=/src/styles.css&resolutionWidth=320&resolutionHeight=675

Does setting `min-height: 100vh;` on the `` tag makes the image take the whole space? — Sally loves Lightning, Jul 01 '23 at 20:33
What meta settings do you have? Please put a runnable snippet into your question to make it easier for us to test. See https://stackoverflow.com/help/minimal-reproducible-example — A Haworth, Jul 01 '23 at 20:44
I’ve just noticed that in the image of your code you have at least one div outside the body element. — A Haworth, Jul 01 '23 at 20:46
And it looks as though it’s covering things to me. What’s the image actually look like, in terms of that blue? — A Haworth, Jul 01 '23 at 20:52
Ah, I think I’ve just understood - you want the blue from the image to go right to the top, is that correct? At the moment the blue seen at the very top is from the background-color.. — A Haworth, Jul 01 '23 at 21:01
@AHaworth Sorry, it's difficult to make this reproducible because this white bar at the top of the screen only shows up on mobile devices, not on a desktop monitor — ls170292, Jul 01 '23 at 23:37
@AHaworth That is correct, I want the image to cover that blue bar on the top of the screen, which is in fact the background-color of the body element...I should've used another color — ls170292, Jul 01 '23 at 23:38
Sadly I do not think you can do this -the best you can do is take the topmost color from the background-image and use it as background-color. — A Haworth, Jul 02 '23 at 06:29

Md. Rakibul Islam · Answer 1 · 2023-07-02T09:42:57.080

0

The solution is simple. Just use background instead of background-image like this otherwise it will not render the image in some cases.

In a background property you can add background-color , repeat , no-repeat and other image attributes, but in the background-image property you are only allowed to add image nothing else.

And that top area of the mobile can't be replaced with a website body background image.

body{
    background: url("https://res.cloudinary.com/ducqdbpaw/image/upload/v1685200227/FABIO/2017/Sanzogni_Significance_14_36_x_48_silver_leaf_oil_on_canvas_mouygv.jpg") no-repeat center center fixed;    
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
      body {
        background: url("https://res.cloudinary.com/ducqdbpaw/image/upload/v1685200227/FABIO/2017/Sanzogni_Significance_14_36_x_48_silver_leaf_oil_on_canvas_mouygv.jpg") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100%;
        overflow: hidden;
      }
  </style>
</head>
<body>
  
</body>
</html>

edited Jul 02 '23 at 09:42

answered Jul 01 '23 at 20:34

Md. Rakibul Islam

2,140
1
7
14

1

Are you *sure* that your answer is going to fix the problem? If yes, how? – Sally loves Lightning Jul 01 '23 at 20:40
Yes, it works. I tested it. – Md. Rakibul Islam Jul 01 '23 at 20:43
In a background property you can add background-color , repeat , no-repeat and other image attributes, but in the background-image property you are only allowed to add image – Md. Rakibul Islam Jul 01 '23 at 20:45
That's true, but that's what the user did. They've only added an image in `background-image`, and all their CSS code is correct (that's what I see). So there's no difference between `background` and `background-image` beside that you can use all `background-` properties in `background`, but obviously, that's not the case here. Unless you have an explanation for why `background` can work, and not `background-image`, this answer is incorrect (doesn't solve the problem - specifically doesn't do anything). Happy to be corrected. – Sally loves Lightning Jul 01 '23 at 20:50
No, you didn't get the issue. When he is using "background-image" he has to remove "no-repeat center center fixed" these details from the end of the property value. Then it works too. – Md. Rakibul Islam Jul 01 '23 at 20:53
In what way is the result you are getting any different from that given in the question? – A Haworth Jul 01 '23 at 21:02
The way OP was trying was not getting the image rendered. That's the problem. – Md. Rakibul Islam Jul 01 '23 at 21:05
The image is rendered but actually your solution is slightly worse than the result shown in the question as you haven’t set a blue background which goes to the top of the screen. – A Haworth Jul 01 '23 at 21:08
@Md.RakibulIslam Sadly using background instead of background image still gives me the same issue. The image isn't covering that top bar. – ls170292 Jul 01 '23 at 23:39
@AHaworth I added codesanbox.io reproducible example in the question description – ls170292 Jul 01 '23 at 23:47
@Md.RakibulIslam Your solution works in the codesanbox.io simulation mobile viewport but not on an actual mobile device screen – ls170292 Jul 01 '23 at 23:56
I think that is a margin area of the mobile browser/ the mobile device itself. It is not any webpage background color. I am not sure but please try other webpages in your mobile browser because in my mobile I have the same shape at the top and that color is same for all webpages as it is not the webpage background color. – Md. Rakibul Islam Jul 02 '23 at 00:45
@Md.RakibulIslam I think you might be right....but if that is a margin area, then why does it change color when I set the background color of the body tag of my webpage? This is proven with my first image, where that top "bar" area next to the camera lens is uniformly the same color as the rest of the screen. – ls170292 Jul 02 '23 at 02:07
@Md.RakibulIslam I've tested this out with other colors as well...same result, this just doesn't seem to work when I use an image. Same example but with a yellow background color: https://res.cloudinary.com/ducqdbpaw/image/upload/v1688263996/Screen_Shot_2023-07-01_at_21.10.23_u58pso.jpg – ls170292 Jul 02 '23 at 02:14
@Md.RakibulIslam https://res.cloudinary.com/ducqdbpaw/image/upload/v1688264346/Screen_Shot_2023-07-01_at_21.10.23_whz1eo.jpg – ls170292 Jul 02 '23 at 02:20
1

Yes, background-color will go under the status bar at the top of a 'real' IOS device, but background-image won't. This answer does nothing and perhaps should be removed? – A Haworth Jul 02 '23 at 06:17

M108 · Answer 2 · 2023-07-03T04:11:52.820

-2

To have a background image cover the entire viewport for mobile devices in your React project, you can try the following approach:

Set the background image on the tag:

css:

body { background-image: url("your-image-url"); background-size: cover; background-repeat: no-repeat; background-position: center center; }
Make sure the and elements have 100% height:

css:

html, body { height: 100%; }
Set the component to cover the entire viewport:

import React from 'react';

const App = () => { return ( {/* Your app content */} ); };

export default App;

css:

.app { height: 100vh; }

By combining these steps, the background image should cover the entire viewport on mobile devices. Make sure to replace "your-image-url" with the actual URL of your image.

If you're still experiencing issues, it's possible that there might be conflicting CSS rules or other factors affecting the layout. In that case, it would be helpful to see the HTML structure and any additional CSS styles applied to identify the underlying problem.

Hope this would help you.

edited Jul 03 '23 at 04:11

answered Jul 01 '23 at 20:44

M108

62
5

2

Please try out any solutions you pick up from random AI systems and really check they work rather than posting generalised, ‘this may or may not work’ stuff here. – A Haworth Jul 01 '23 at 20:55
Also, starting an answer with `dear` is quite odd. – Roko C. Buljan Jul 01 '23 at 21:14
Most or all of your (now 11) answers so far here today appear likely to have been entirely or partially written by AI (e.g., ChatGPT). For example, I've run one of the questions you answered through ChatGPT and received a nearly identical response. Please be aware that [posting AI-generated content is not allowed here](//meta.stackoverflow.com/q/421831). If you used an AI tool to assist with any answer, I would encourage you to delete it. – NotTheDr01ds Jul 01 '23 at 22:31
Address someone you don't know as "dear" is tantamount to sexual harassment in many jurisdictions. What's your real name? – tchrist Jul 02 '23 at 20:23

background-size: cover not working on mobile screens

2 Answers2