CODEWITHSUNDEEP
htmlcssimagebootstrap-4image-size
Jhon Piper
Jhon Piper

Reputation: 613

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

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:

enter image description here

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:

enter image description here

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>

Upvotes: 2

Views: 1408

Answers (3)

Nirav Joshi
Nirav Joshi

Reputation: 2960

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>

Upvotes: 0

mrwpress
mrwpress

Reputation: 311

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

Upvotes: 1

Dennis Miller
Dennis Miller

Reputation: 46

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.

Upvotes: 3

Related Questions