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

How to keep pictures from scrolling? – Html

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.

.mainpage {
  overflow-y: hidden;
  overflow-x: hidden;
}
<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>

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?

Tags:

3

Answers


  1. 0

    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.

    #mainpage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
    <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>
    Login or Signup to reply.
  2. 0

    Position Fixed Background Image

    CSS property position value can position the dom element with values like ,,,.

    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

    *, *::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;
}
    <div class="bg"></div>
<div class="content">
  <!-- content -->
</div>
    Login or Signup to reply.
  3. 0

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

    #mainpage {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
    <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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search