0

I'm a beginner in html and I am trying to use an image as a complete background to my page . I want the image to fit my sceen so that I do not have to scroll down to see the rest of the image. I have tried this but the image doesn't even load to begin with .

.html , .body{
  margin:0;
  height:100%;
}

#map{
  background: url("HTML_FILES/IMAGES/map.jpg");
  height:100%;
  width:100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<div id = "map"></div>

My folder structure is like :

PROJECT 
  HTML_FILES
      mypage.html
      IMAGES 
          map.jpg

I would appreciate your help with guiding me to load the image and adjust it correctly . Thank you in advance .

VASILEIOS SKENTOS
  • 83
  • 1
  • 9

2 Answers2

0

.html , .body{
  margin:0;
  height:100%;
}

#map{
  background-image: url(https://images.unsplash.com/photo-1495567720989-cebdbdd97913?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80);
  height:100%;
  width:100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position:absolute;
  top:0;
  bottom:0;
}
<div id = "map"></div>
Rayees AC
  • 4,426
  • 3
  • 8
  • 31
0

Use the below style to get it done.

body {
    background: url(HTML_FILES/IMAGES/map.jpg);
    height: 100%;
    width: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
Harry
  • 1