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

Question

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>

rx2347 · Accepted Answer · 2020-03-06T21:21:35.383

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.

If you full screen that snippet, however, you will see that the image has been cropped. I'm trying to get the image to keep its height-width ratio so that there's no cropping. As far as I know, that would mean having no set height, and I've tried setting my height to auto, but the image disappears. — mrees0903, Mar 06 '20 at 21:01
true. you can change the position if you want a fixed height. otherwise you should go with a regular image in the first place (width:100%, height:auto). — rx2347, Mar 06 '20 at 21:04

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

1 Answers1