Search code examples
htmlcssbackground-image

Background Image Isn't Moving

I'm having trouble adjusting an image (folk.jpg) so that it covers the background of my page, just underneath the navigation bar. I've tried adjusting the size, but it doesn't seem to want to do anything. I'm wondering if there's something in my CSS that's preventing me from adjusting the image. Here's the code:

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

.topnav {
  overflow: hidden;
  font-family: 'Lato', sans-serif;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav a {
  float: right;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 6px;
  font-size: 17px;
  border: none;
  background-color: #D7D2D2;
}

.topnav .search-container button {
  background: #5AA797;
  margin-top: 6px;
  color: white;
}

.banner {
  background-position: center;
  background-size: cover;
  margin-top: -10px;
}
<link rel="stylesheet" href="://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="//fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">

<div class="topnav">
  <div class="search-container">
    <form action="/action_page.php">
      <input type="text" placeholder="search" name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
  <a class="active" href="#about">ABOUT</a>
  <a href="#news">NEWS</a>
  <a href="#events">EVENTS</a>
  <a href="#contact">CONTACT</a>
</div>

<div class="banner">
  <img class="imgheader" src="/Users/Desktop/folk.jpg" alt="folk band">
</div>

Solution

  • Considering you're probably going to want to have actual content underneath your header, rather than just the image, I'd recommend making use of the background-image CSS property rather than an <img> tag. This will make it so that content entered into .banner (or similar) will be able to sit on top of the background.

    For this, you're looking for background-image: url(''). That, in combination with background-size: cover (which you already have on .banner), will give you the background image, but it will only take up a sliver of the height. As such, you'll need to specify the height, taking the navbar into consideration.

    This can be done with the calc() function, subtracting the height of the navbar from 100%. In my snippet, this is 96px, though note that you don't actually specify a fixed height for the navbar. As such, you may want to make use of media queries to adjust this 'offset' at different resolutions.

    Finally, you'll want to remove the margin-top: -10px from .banner so that it sits 'flush' up against your navbar.

    All of this can be seen in the following:

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

.topnav {
  overflow: hidden;
  font-family: 'Lato', sans-serif;
}

.topnav .search-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.topnav a {
  float: right;
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav .search-container {
  float: right;
}

.topnav input[type=text] {
  padding: 6px;
  margin-top: 6px;
  font-size: 17px;
  border: none;
  background-color: #D7D2D2;
}

.topnav .search-container button {
  background: #5AA797;
  margin-top: 6px;
  color: white;
}

.banner {
  background-image: url('http://placehold.it/100');
  background-position: center;
  background-size: cover;
  height: calc(100% - 96px);
}

@media screen and (min-width: 768px) {
  .banner {
    height: calc(100% - 48px);
  }
}
    <!DOCTYPE html>

<html lang="en">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" href="indyfolk.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet">
  <script src=""></script>
  <title>Indy Folk News</title>
</head>

<body>

  <div class="topnav">
    <div class="search-container">
      <form action="/action_page.php">
        <input type="text" placeholder="search" name="search">
        <button type="submit"><i class="fa fa-search"></i></button>
      </form>
    </div>
    <a class="active" href="#about">ABOUT</a>
    <a href="#news">NEWS</a>
    <a href="#events">EVENTS</a>
    <a href="#contact">CONTACT</a>
  </div>
  <div class="banner">
  </div>
  
</body>

</html>

    Also, as an aside, you have an erroneous </script> tag at the end of your Font Awesome reference :)