making background images responsive

Question

I am writing a coming soon page and it works nice in desktop mode! but in mobile, the image's some artwork hidden,

in mobile view, it looks like this:

you may notice, in mobile view, it is hidden some part of the artwork

but it works great in desktop mode:

this is my full snippet:

<!DOCTYPE html>
<html>
  <head>
    <title>HOME: </title>
  </head>
<style>
body, html {
  height: 100%;
  margin: 0;
}

.bgimg {
  background-image: url('bg12.png');
  height: 100%;
  max-width: 100%;
  background-position: center;
  background-size: cover;
  position: relative;
  color: black;
  font-family: KhmerUI;
  src: url(KhmerUI.ttf);
  font-size: 25px;
}

.topleft {
  position: absolute;
  top: 0;
  left: 16px;
}

.bottomright {
  position: absolute;
  top: 0;
  right: 30px;
}

.middle {
  position: absolute;
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
  text-align: center;
}

hr {
  margin: auto;
  width: 40%;
}
</style>
<body>

<div class="bgimg">
  <div class="topleft">
    <img src="loDgo-2.png" alt="logo" style="width:150px;height:120px;">
  </div>
  <div class="middle">
    <h1>COMING SOON</h1>
    <hr>
    <p>STAY TUNED</p>
  </div>
  <div class="bottomright">
    <p>Powered By</p>
    <img src="cropD-3.png" style="width:150px;height:50px;">
    <div></div>
  </div>
</div>

</body>
</html>

and this is my background images:

Can anyone help me to fix the mobile view, I need the artwork of the images should look like as desktop mode I see. The artwork cant be hidden

You can try changing `background-size:cover` to `background-size:contain` — Chif, Sep 19 '19 at 05:31
To fix that you can then add ```background-repeat: no-repeat``` to the CSS styles — Chif, Sep 19 '19 at 05:39
But it has another issue, the upside and downside of the page blank — Bayon Sharke, Sep 19 '19 at 05:43

Chif · Accepted Answer · 2019-09-19T06:39:31.110

One solution is to update the styles to:

.bgimg {
  background-image: url('bg12.png');
  height: 100%;
  max-width: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
  color: black;
  font-family: KhmerUI;
  src: url(KhmerUI.ttf);
  font-size: 25px;
}

In order to further customize position the image, you use media queries to try out different options on background-position

See more infomation here: CSS background-size cover and background-position

and here: https://www.w3schools.com/cssref/pr_background-position.asp

Nevin · Answer 2 · 2019-09-19T05:55:41.043

2

Try this

img {
     max-width: 100%; 
     display:block; 
     height: auto;
}

Sample jsFiddle (Resize the browser to see the responsiveness)

edited Sep 19 '19 at 05:55

answered Sep 19 '19 at 05:50

Nevin

769
1
11
26

score 2 · Answer 3 · answered Sep 19 '19 at 06:58

2

It good you are using background-size: cover; because its preferable in good coding practices. but to resize your image according to screen size use background-size: 100%;

answered Sep 19 '19 at 06:58

James

66
4

score 1 · Answer 4 · answered Sep 19 '19 at 06:13

1

You can try below CSS.

img {
  width : 100%;
  height : auto
}

answered Sep 19 '19 at 06:13

Pushprajsinh Chudasama

7,772
4
20
43

score 0 · Answer 5 · answered Sep 19 '19 at 06:46

Hope this will help you fix it.

Link to codepen for the same as I could not add image as background in here.

.background{
  background-image:url('image url');
  background-repeat:no-repeat;
  background-position:50%;
  background-size:100%;
  width:calc(100vw - 1em);
  height:calc(100vh - 1em);
  display:block;
  position:relative;
}

h1{
  margin:0;
  display:inline-block;
  padding:0;
  text-align:center;
  transform:translate(10em,10em);
  color:white;
  position:relative;
}

<div class="background">
  <h1>Coming Soon</h1>  
</div>

making background images responsive

5 Answers5