0

I am trying to use an image of a guy on the left hand side of my layout. but in smaller screens it looks stretched. I have tried to use following background properties:

background: rgba(0, 0, 0, 0) url("../images/login.png");
background-size: 100% 100%; // i have tried with contain and cover as well
background-repeat: no-repeat;
height: 92%;
Nomi Khurram
  • 101
  • 1
  • 11

4 Answers4

1

as it will be stretched on a larger background than its res, removing height attr may show better result. or can be set directly based on static width and height.

Rifat
  • 1,700
  • 3
  • 20
  • 51
0

use background-size: cover If you don't like the result of that, use background-size: contain

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • I have tried both but not working. Using background-size:cover the images goes outside the div, using background-size: contain the image looks smaller as it contain fit the image inside the div. – Nomi Khurram Jan 12 '17 at 16:10
  • You can also try `background-size: 100%`, which will only fit the width and adjust the heigth automatically in proportion to the width. But also that will cut off the image in certain situations. So the only option to reliably see the whole image in ANY window proportion is `contain`. Anything that fixes width AND height will distort the image proportions in most cases. – Johannes Jan 12 '17 at 16:14
0

use background-size: contain and remove the height: 92%

Abbas Mohammad
  • 1
0

You can try :

background-size: auto; background-position: left center;

Maybe you could create a pen with https://codepen.io to reconstruct the problem.

Christian Nitsche
  • 1
  • 2