Layer over Image and stack flow

For #1

In old'n days you would add to the CSS for the jumbotron class position:relative so that you can add to the jumbotron component an absolute positioned DIV (position:absolute).

Old way:

  1. add to `.jumbotron` CSS `position:relative;`
  2. drag/drop `DIV` element just before the `h1` element
  3. give that div a class something like `jumbotron-overlay`
  4. create a CSS rule for `jumbotron-overlay`
  5. give that rule the following properties and values
.jumbotron-overlay {
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,0.5); /* or use transparent pixel.gif like below */
    background:url('pixel.gif') repeat; /* only if your not using the rgba method */
}

That should allow the transparent DIV to sit in between the background and other elements in the jumbotron. If not then you will have to add properties like, z-index:0 and greater, to the overlay and the other elements to get them to stack correctly. But it might just work with the natural order so give that a try first if using this method.

New way:

  1. CSS3 Multiple Backgrounds
  2. create a transparent pixel.gif image of the color and transparency you want.
  3. import the pixel.gif file to your project
  4. (using the Hero Food jumbotron as example) update your CSS for the jumbotron like this
div.jumbotron.hero-food {
  color:#fff;
  text-align:center;
  background-image:url('pixel.gif'), url('hero-background-food.jpg'); /* only thing changed was this line */
  background-size:cover;
  background-position:center;
  padding-top:100px;
  padding-bottom:100px;
}

The first image is the image on top of all other images that come after it. The background-size:cover; already causes the pixel image to cover over the whole food background image.

Here is a site to look at regarding CSS3 Multiple Backgrounds https://www.w3schools.com/Css/css3_backgrounds.asp

If you don't have something to create a transparent pixel.gif, then I would recommend paint.net image editor (https://www.getpaint.net/index.html). It's free.

Saj