there is gap between experience Background image and Html background . any solution. thanks

Question

html {
    background-color: #9bf6ff;
    font-family: 'Oswald', sans-serif;
    width: auto;
}


#headerExperience {
    line-height: 200px;
    font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial,
        sans-serif;
    color: khaki;
    background-color: steelblue;
    background-image: url("images/Experience\ background\ imagee.jpg") ;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
}

<html>
<!--Header-->
  <div id="headerExperience">
    <h1>Experience</h1>
  </div>
  
 </html>

tag contain div with id "header experience" and

Experience

and both are child of HTML element. and I try to format using CSS but I got a gap between the HTML background and experience background. I tried many ways to solve no success so far.

You are trying to cover the whole window with the div? Not really sure what you are trying to do here. — Ugene, Jul 27 '21 at 04:01

score 0 · Answer 1 · answered Jul 27 '21 at 04:18

If you inspect the elements using the browser tools you will see there is a 21.4px top-margin on your headerExperience element. You can add a reset to your css to reset all margin and padding to 0. Then if you desire margin and/or padding you can add as needed directly to the elements you want.

*{
  margin: 0;
  padding: 0;
}

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

html {
  background-color: #9bf6ff;
  font-family: 'Oswald', sans-serif;
  width: auto;
}

#headerExperience {
  line-height: 200px;
  font-family: "proxima nova bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: khaki;
  background-color: steelblue;
  background-image: url("images/Experience\ background\ imagee.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-align: center;
}

<html>
<!--Header-->
<div id="headerExperience">
  <h1>Experience</h1>
</div>

</html>

there is gap between experience Background image and Html background . any solution. thanks

Experience

1 Answers1