How to keep pictures from scrolling?

I put a 1920 * 1280 picture in the HTML, and I want the picture to fill the entire screen. And the image is fixed on the screen, and will not change position with the sliding of the mouse.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.mainpage {
  overflow-y: hidden;
  overflow-x: hidden;
}

<!-- language: lang-html -->

<a-assets>
  <img id="mainpage" src="https://static.dezeen.com/uploads/2017/04/aia-honour-im-pei-grande-louvre-25-year_dezeen_2.jpg">
</a-assets>

<!-- end snippet -->

I also try to use this code, but it doesn't work.

    position: fixed;
    top: 0;
    left: 0;

Should I change the size of the picture, is there another way to stop scrolling?

Instead of using position you can simply set height 100 vh and width 100vw property like below:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#mainpage {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

<!-- language: lang-html -->

<a-assets>
  <img id="mainpage" src="https://static.dezeen.com/uploads/2017/04/aia-honour-im-pei-grande-louvre-25-year_dezeen_2.jpg">
</a-assets>

<!-- end snippet -->

To make the image fill the entire screen and stay fixed in place, you can use the following CSS

With this code, the image stays in place even if the user scrolls the page. The top and left properties position the image at the top left corner of the screen. The width and height properties are set to 100%, so the image fills the entire screen. Lastly, the object-fit property set to cover scales the image to cover the entire element.

Note that you should use the ID selector #mainpage instead of the class selector .mainpage because in your HTML code you have set the ID of the image element to mainpage.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

#mainpage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<!-- language: lang-html -->

<a-assets>
  <img id="mainpage" src="https://static.dezeen.com/uploads/2017/04/aia-honour-im-pei-grande-louvre-25-year_dezeen_2.jpg">
</a-assets>

<!-- end snippet -->

Position Fixed Background Image

CSS property position value can position the dom element with values like [tag:reletive],[tag:absolute],[tag:fixed],[tag:sticky].

You could use position : fixed; to achieve what you want

CSS id selector is # so you cannot use .mainpage to select id attribute.

CSS class selector is . which you're using here

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

*, *::before, *::after {
  box-sizing: border-box;
  margin:0;
  padding:0;
}

.bg {    
  background: url('https://scx1.b-cdn.net/csz/news/800/2017/theoreticala.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  height: 100vh;
  width: 100vw;
}

.content {
  position: absolute;
}

<!-- language: lang-html -->

<div class="bg"></div>
<div class="content">
  <!-- content -->
</div>

<!-- end snippet -->