Html Question posted in
Some basic documentation can be found here.

Html – how can I stretch the image full with same quality?

you see at the right and and the left the image is white not full stretched. How can I stretch it with good quality ?

code:

.bg {
  background-image: url('/app/assets/bg.jpeg');
  background-size: contain;
  background-repeat: no-repeat;
  height: calc(100vh - 196px);
  background-position: top;
}

enter image description here

Tags:

2

Answers


  1. 0

    You are all right there. Just need to replace background-size: contain; width background-size: cover;.

    Even if that does not make, then you can try aspect ratio.

    * {
  margin: 0;
  padding: 0;
}

.bg {
  background-image: url('https://plus.unsplash.com/premium_photo-1664304752635-3e0d8d8185e3');
  background-size: cover;
  background-repeat: no-repeat;
  height: calc(100vh - 196px);
  background-position: top;
}
    <div class='bg'></div>

    Hope this helps.

    Login or Signup to reply.
  2. 0

    You can use background-size: coverfor that, but this will result in the top and/or bottom part of the image being cut off in the situation you are showing in your screenshot (also depending on the background-position setting).

    It depends on the image and on the screen proportions (width versus height of the area in which the image is shown) whether that works well – you’ll have to try.

    The best thing would be to set the height relative to the width so you always get the same width/heigth ratio, using vw units for it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search