htmlcssheaderresizecover

Header image repeats with background: cover;. How can I fix this?


My goal is to create a bakery website, hence the title and image, and the site will not be published to any servers. I would like to have an image at the top of my page beneath a navigation menu that keeps the same aspect ratios when I resize the window, but it would require there to not be a height specification, or the image will crop when I enlarge the window, as well as horizontally repeat. Here is the code I have so far:

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
.header-img {
height: 370px;
width: 100%;
  background-repeat: no-repeat;
  background: url('https://static.dezeen.com/uploads/2019/12/flourist-bakery-ste-marie-vancouver-canada_dezeen_hero-b.jpg');
  background-size: contain;
}
body {
        background-color:white;
        margin: 0;
        padding: 0;
        text-align:center;
}          
.sticky + .content {
  padding-top: 60px;
}
.content {
  padding: 16px;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
.menu {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000000;
}
.li {
  float: left ;
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.liname {
 float: left;
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 26px
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px;
  text-decoration: none;
}
body {
    margin: 0;
    text-align: center;
}
<link rel="icon" href="https://cakesreanimated.com/wp-content/uploads/2020/01/favicon-cakes-reanimated.png">

</br>
<div id="navbar">
<nav>
<ul class="menu">
<li class="liname">
<a>Bakes n' Cakes</a>
</li>
<li class="li">
<a href ="bakerysite.html">Home</a>
</li>
<li class="li">
<a href ="about.html">About</a>
</li>
<li class="li">
<a href ="prices.html">Prices</a>
</li>
<li class="li">
<a href ="contact.html">Contact</a>
</li>
</ul>
</nav>
</div>
<main>
<div class="header-img"  id=#header></div>
</main>
</br>


Solution

  • You need to set the background-size to cover in your css like shown below.

    You can change the position of the image with the background-position property.

    Further information:

    https://www.w3schools.com/cssref/css3_pr_background-size.asp https://www.w3schools.com/cssref/pr_background-position.asp

    window.onscroll = function() {myFunction()};
    
    var navbar = document.getElementById("navbar");
    var sticky = navbar.offsetTop;
    
    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
      } else {
        navbar.classList.remove("sticky");
      }
    }
    .header-img {
    height: 370px;
    width: 100%;
      background-repeat: no-repeat;
      background: url('https://static.dezeen.com/uploads/2019/12/flourist-bakery-ste-marie-vancouver-canada_dezeen_hero-b.jpg');
      background-size: cover;
    }
    body {
            background-color:white;
            margin: 0;
            padding: 0;
            text-align:center;
    }          
    .sticky + .content {
      padding-top: 60px;
    }
    .content {
      padding: 16px;
    }
    .sticky {
      position: fixed;
      top: 0;
      width: 100%;
    }
    .menu {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #000000;
    }
    .li {
      float: left ;
      font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    }
    .liname {
     float: left;
     font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
      font-size: 26px
    }
    li a {
      display: block;
      color: white;
      text-align: center;
      padding: 16px;
      text-decoration: none;
    }
    body {
        margin: 0;
        text-align: center;
    }
    <link rel="icon" href="https://cakesreanimated.com/wp-content/uploads/2020/01/favicon-cakes-reanimated.png">
    
    </br>
    <div id="navbar">
    <nav>
    <ul class="menu">
    <li class="liname">
    <a>Bakes n' Cakes</a>
    </li>
    <li class="li">
    <a href ="bakerysite.html">Home</a>
    </li>
    <li class="li">
    <a href ="about.html">About</a>
    </li>
    <li class="li">
    <a href ="prices.html">Prices</a>
    </li>
    <li class="li">
    <a href ="contact.html">Contact</a>
    </li>
    </ul>
    </nav>
    </div>
    <main>
    <div class="header-img"  id=#header></div>
    </main>
    </br>

    To maintain aspect ratio while width:100%, use a regular image inside your .header-img div and fix the css like this:

    .header-img {
      width: 100%;
    }
    
    .header-img img {
      width:100%;
      height:auto;
    }
    

    Sorry if I missunderstood.