How to make background-image full-screen with html css without scrollin on image-CodePudding

I want to create background-image full-screen in HTML, and CSS but without scrolling background-image doesn't to move up or down. Any idea?

  * {
            margin: 0;
            padding: 0;
        }
        
   
        
        img {
            background-image: url("./Landing_Page_TBB.jpg");
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
            height: 100%;
            width: 100%;
        }

<body>
    <div >
        <img src="./Landing_Page_TBB.jpg" alt="">
    </div>

</body>

Here is code what I have created.

CodePudding user response：

You were in the right direction. Take a look at this:

background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;

You can test it here: https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_background-size

CodePudding user response：

 * {
            margin: 0;
            padding: 0;
        }
        
   
        
        .background-image {
            background-image: url("https://i.pinimg.com/564x/0a/a8/bf/0aa8bfa73e2f93d3816b75bbd1b4a95a.jpg");
            background-repeat: no-repeat;
            background-position: center center;
            background-attachment: fixed;
            background-size: cover;
            height: 100vh;
            width: 100%;
        }

<body>
    <div ></div>
</body>

CodePudding user response：

Since you said that you'd like to display your image in the background in full screen mode and not scroll away, I would suggest the following:

.background-image {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100vw;
  min-height: 100vh;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.very-high-paragraph {
  height: 1500px;
  background-color: rgba(255, 255, 255, 0.5);
}

<img  src="https://filesamples.com/samples/image/jpeg/sample_640×426.jpeg">
<h1>Hello World</h1>
<p >Lorem Ipsum</p>

But the better suited option would be to use the CSS property background-image and discard the <img /> tag you're currently using. I think you mixed up two things there.