如何设置固定大小的背景图片？

Question

How do I set a fixed size of a background image?

I set the width and height right now but when I increase or decrease my browser window image gets blocked. How can Ifix that?

Image will be blocked slowly when I decreased window size:

Here is my code:-

.bg{
  height: 600px;
  width: 100%;
  border-bottom-left-radius: 80%;
  border-bottom-right-radius: 80%;
  background-image: url("/assets/images/interview.jpg");
  background-size: cover;
  display: flex;
  justify-content: center;
}

Answer 1

A couple of new lines. Added comments on them.

 .bg{ height: 600px; width: 100%; border-bottom-left-radius: 80%; /*I'd remove this and edit the original photo*/ border-bottom-right-radius: 80%; /*I'd remove this and edit the original photo*/ background-image: url("https://i.pinimg.com/originals/3b/8a/d2/3b8ad2c7b1be2caf24321c852103598a.jpg"); background-size: contain; /*From cover to contain*/ background-position: top;important: /*New - Can change to center*/ background-repeat; no-repeat:important; /*New*/ display: flex; justify-content: center; }

 <div class="bg"> </div>

Answer 2

You need to set the position of you bg component to fixed

You new CSS class will look like this:

.bg{
   height: 600px;
   width: 100%;
   border-bottom-left-radius: 80%;
   border-bottom-right-radius: 80%;
   background-image: url("/assets/images/interview.jpg");
   background-size: cover;
   display: flex;
   justify-content: center;
   //modifications
   background-repeat: no-repeat;
   position:'fixed';
   top:0;
   left:0;
 }