create full page image using HTML CSS

Question

I am working on a front end project where I want to display an image in the starting page of my app as the example below :

With my code below I have my image inside a container and I want it to fit my container size and fill the whole screen and then continue working the rest of the website below the image.However my image does not fit in the whole screen and I do not know why :

.welcome-container{
    width:100%;
    height:500px;
    margin:0px;
    

}

.welcome-pic img {
    width:100%;
    height:500px;
}

  <div class = "welcome-container">
      <div class = "welcome-pic">
        <img src = "IMAGES/welcome_pic.jpg" alt="#">
      </div>
    </div>

I have set the image height and width just like the container's and the margin to 0 but there are small gaps around the image . I would appreciate your help with this . Thank you in advance .

Answer 1

html, body {    /*add*/
  padding: 0;
  margin: 0;
}

.welcome-container{
    width:100%;
    height:500px;
    margin:0px;
    

}

.welcome-pic img {
    width:100%;
    height:500px;
}

<div class = "welcome-container">
      <div class = "welcome-pic">
        <img src = "https://png.pngtree.com/thumb_back/fw800/background/20190221/ourmid/pngtree-shading-background-abstract-colorful-background-colorful-art-image_22644.jpg" alt="#">
      </div>
    </div>

Answer 2

You could try to use the background-size: cover; property inside your welcome-pic class. Code would look like this:

.welcome-pic img {
width:100%;
height:500px;
background-size: cover;
background-image: url("IMAGES/welcome_pic.jpg");
}