How do you only display part of a background is css?

Question

As a newer user to HTML and CSS I'm trying to get an image to display as a banner with text over it, but everything I've and tested with says that's not possible with an image, so I'm using css's background tool. But as I'm trying to make it a banner, it's only showing the top half of the image.

Here is the image I'm trying to display

This is what I currently have:

Everything is fine including the aspect ratio of the image, but I want to to center in on the middle half, which is roughly this:

I need less of the clouds and more of the mountains, how do I crop the background image to center in on the middle?

body {
  background-size: cover;
  background-position: center;
}

body,
html {
  width: 100%;
  height: 100%;
  font-family: "Lato";
  color: white;
  margin: 0;
  padding: 0;
}

h1 {
  font-weight: 700;
  font-size: 5em;
}

.content {
  padding-top: 10%;
  text-align: center;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

.headerText {
  padding-top: 10%;
}

hr {
  width: 400px;
  border-top: 0.5px solid #f8f8f8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

p {
  color: blue;
}

#banner {
  width: 100%;
  background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
  background-size: cover;
}

#banner h4 {
  padding-bottom: 100px;
}

<html>

<head>
  <title>Website Sample Project</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/app.css">
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a><img src="https://via.placeholder.com/100x40"></a>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Locations</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="locations/narnia.html">Narnia</a>
          <a class="dropdown-item" href="#">Neverland</a>
          <a class="dropdown-item" href="#">Somehere</a>
          <a class="dropdown-item" href="#">Nowhere</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </nav>

  <section id="banner">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="content">
            <a><img src="https://via.placeholder.com/600x160"></a>
            <div class="headerText">
              <h3>Sample Text</h3>
            </div>
            <hr>
            <h4>Sample Text</h4>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


</body>

</html>

related to get all what you need about background-position: https://stackoverflow.com/q/51731106/8620333 — Temani Afif, Nov 27 '19 at 10:29

Dennis Miller · Accepted Answer · 2019-11-27T03:23:14.460

3

background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;

replace with:

background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center center;

UPDATE:

at the end of the line change the percentage for vertical align:

background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;

as example use this

no-repeat center 35%;

and change 35 to whatever you need.

edited Nov 27 '19 at 03:23

answered Nov 27 '19 at 02:27

Dennis Miller

46
2

It would be good if you could point out what you changed with a brief explanation. – cjl750 Nov 27 '19 at 02:47
Ok, What if I wanted it in between the middle and the top? About here: https://imgur.com/a/pT9JloF – Jhon Piper Nov 27 '19 at 02:59
at the end of the line play with the percentage then, answer edited, check UPDATE – Dennis Miller Nov 27 '19 at 03:21

score 1 · Answer 2 · answered Nov 27 '19 at 04:58

First, I would crop your image to a bit more of the height you want it to be. So at like 3000px, you should have one size with a certain height. Then, you should use CSS media query to change that background image once it gets to desktop like 2500px. Then, again at like tablet around 900px.

In the answer above they are right about the position:

background: url("yourpathtoimage.jpg") center center no-repeat;

What that does is centers vertically and centers horizontally. Then, tells the image to not repeat.

You asked about how to get it a little more to the top 1/3. That would change things:

background: url("yourimagepath") 0 15% no-repeat;

The "0" and "15%" are x and y respectively. Check this out for some further clarity:

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

NOTE: If you crop out 3 sizes like I suggested above you may not even have to play with the position settings.

Extra Note: Here is a link to CSS media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

score 0 · Answer 3 · answered Nov 27 '19 at 05:29

You can achieve full background image with giving height to #banner

#banner {
    width: 100%;
    background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
    background-size: cover;
    height: 100%;
}

body {
  background-size: cover;
  background-position: center;
}

body,
html {
  width: 100%;
  height: 100%;
  font-family: "Lato";
  color: white;
  margin: 0;
  padding: 0;
}

h1 {
  font-weight: 700;
  font-size: 5em;
}

.content {
  padding-top: 10%;
  text-align: center;
  text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
}

.headerText {
  padding-top: 10%;
}

hr {
  width: 400px;
  border-top: 0.5px solid #f8f8f8;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

p {
  color: blue;
}

#banner {
  width: 100%;
  background: url(https://images.unsplash.com/photo-1571847490051-491c12ff6540?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2550&q=80) no-repeat center top;
  background-size: cover;
  height: 100%;
}

#banner h4 {
  padding-bottom: 100px;
}

<html>

<head>
  <title>Website Sample Project</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/app.css">
</head>

<body>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
    <a><img src="https://via.placeholder.com/100x40"></a>
    <ul class="navbar-nav ml-auto">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Locations</a>
        <div class="dropdown-menu" aria-labelledby="dropdown01">
          <a class="dropdown-item" href="locations/narnia.html">Narnia</a>
          <a class="dropdown-item" href="#">Neverland</a>
          <a class="dropdown-item" href="#">Somehere</a>
          <a class="dropdown-item" href="#">Nowhere</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </nav>

  <section id="banner">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="content">
            <a><img src="https://via.placeholder.com/600x160"></a>
            <div class="headerText">
              <h3>Sample Text</h3>
            </div>
            <hr>
            <h4>Sample Text</h4>
          </div>
        </div>
      </div>
    </div>
  </section>

  <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


</body>

</html>

How do you only display part of a background is css?

3 Answers3