Background image responsive to mobile view using pure css

Question

I want my background image to be responsive in mobile view.

I used this to scale my background image to the whole desktop:

 html  {
   background:url("image/2.jpg") no-repeat center center fixed;
   background-size: cover;
 }

But I cant have a great result in this: (this is most requested suggestion in my search)

@media only screen and (max-width: 600px) {
  html{
    width: 100%;
  }
}

This is a desktop background

While this is what happens in my mobile view

Possible duplicate of [PureCss Responsive Images](https://stackoverflow.com/questions/41214511/purecss-responsive-images) — tbhaxor, Dec 22 '18 at 02:23
Please provide us with some more code and context of your specific problem. — Barrosy, Dec 22 '18 at 02:27
How can I append `width` property to my image? It is just embedded through css — CodeRed, Dec 22 '18 at 02:27
@Barrosy i want the picture in my dekstop to be perfectly scaled in my mobile view — CodeRed, Dec 22 '18 at 02:31
@sallf I already tried but the `height` will not cover the entire view — CodeRed, Dec 22 '18 at 02:33
Could you post a picture of what you want it to look like? You can't make a landscape photo fill a portrait view without cropping it `cover` or shrinking the width to fit `contain`...unless you make it disproportionate. — sallf, Dec 22 '18 at 02:43

score 3 · Accepted Answer · edited Nov 22 '22 at 23:11

One elegant solution would be to better controlling exactly what you want to show in landscape and portrait mode. If you want to be responsive with a landscape image on a portrait screen you necessarily have to "lose something", as per @salff comment

My snippet for being more flexible depending on user screen:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>


html
{
    background:url("https://www.hotelmedici.com/images/slide_home/11_Fori_imperiali_1600X917.jpg") no-repeat center center fixed;
    background-size: cover;
    width: 100%;
}

#warning-message { display: none; }

@media only screen and (orientation:portrait)
{
    #wrapper { display:none; }
    #warning-message { display:block; color: white;}
    
    html
    {
        background:url("https://s3files.core77.com/blog/images/2013/11/ESB-HalloweenLightShow-1.jpg") no-repeat center center fixed;
        background-size: cover;
        height: 100%;
    }       
}


</style>
</head>
<body>

<div id="wrapper">
    <h2>Responsive Images</h2>
    <p>If you want the image to scale both up and down on responsiveness, set the CSS width property to 100% and height to auto.</p>
    <p>Resize the browser window to see the effect.</p>
</div>

<div id="warning-message">
    this website is only viewable in landscape mode
</div>

</body>
</html>

NOTE: the code was produced crossing and tweaking your code, w3schools snippet and this answer

Barrosy · Answer 2 · 2018-12-22T03:18:13.263

You could add something like this:

.yourelement {
  background-image: url("https://i.stack.imgur.com/viNrB.png");
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  height: 247px;
  /*Additional code (don't bother adding this):*/
  text-align: center;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="yourelement">Your content goes in here</div>
    </div>
  </div>
</div>

JSFiddle

You could also replace contain with cover but requires adding some more code. Something I found for this:

.ratio4-3 {
 width: 100%;
 background-image: url("https://i.stack.imgur.com/viNrB.png");
 background-size: cover;
 height: 0;
 padding: 0; /* reset */
 padding-bottom: calc(100% * 3 / 4);
}

.text-center {
  text-align: center;
  color: white;
}

<div class="ratio4-3">
  <div class="text-center">
    content could go in here
  </div>
</div>

JSFiddle

Background image responsive to mobile view using pure css

2 Answers2