Greek Life Image Question

[virginiakettles]

My coding question is in regards to the HTML coding to input the watercolor image at the top of the "Greek Life" page of 83percent.org. What does the phrase "Jumbotron" have to do with that input? Does it put the actual image inside, or does it determine how big the images is?

My other question is what coding is responsible for the image disappearing as you scroll down, and whether there is any coding that has altered the coloring of the actual image (any filters or hues added).

[jeffreybarry]

In this context, "Jumbotron" is a Bootstrap component for displaying a hero image. What's a hero image, you might ask. A hero image is a term used in Web design to describe large images that take up most, if not all, of a screen when opening a web page.

In The Greek Life page, the first line under the comment associates the jumbrotron class of Bootstrap to that div. Note where the div ends.

   <!-- Main jumbotron for full screen image across top -->
    <div class="jumbotron greeklife-header">
      <div class="container-fluid greeklife-overlay">
        <h1>Greek Life</h1>
      </div>
    </div>

So, yes, you're correct in that the jumbotron class sets the size of the image. Also, the jumbotron class could insert the image. Let's look at my custom class for the jumbotron from the CSS file for 83percent.org.

.jumbotron {
  background-image: url("http://via.placeholder.com/1134x692.jpg?text=full+screen+background+video");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  padding: 0;
}

Your first question is going to be something like, "Wait! What's that background image URL?"

Well, that's a bit of pre-production code that I should have eliminated from the final version. Go back to the HTML above, and you'll see another class next to jumbotron. The class is called greeklife-header. The CSS code for that class:

.greeklife-header {
  background-image: url("../images/WLUwatercolorlandscape.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  padding: 0;
}

Notice the similarities, except for the image URL. If I had done my code clean-up, I would have eliminated the jumbotron class and simply used the greeklife-header class.

Still, the general concept of a jumbotron is the same with whatever class name is used. We'll have a session in-class where I go over the formatting of a jumbotron for a web page.

---

You asked, "What code is responsible for the image disappearing as you scroll down, and where there is any coding that has altered the coloring of the actual image (any filters or hues added).

The class greeklife-overlay might have prompted you to ask the question. That class handles the background that is behind the h1 text containing the words "Greek Life". On some of the pages on the site, such as "Scaling Social Pillars", there is a gray overlay behind the text. This gray overlay adds readability to the text. Otherwise, the text would be more difficult to read on the background image. For the Greek Life page, however, there was no need of a gray overlay. However, other elements of the same class (.jumbotron .container-fluid) that added the gray overlay were still needed. So, I added an extra class named greeklife-overlay to eliminate the default gray overlay.