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:
- add to `.jumbotron` CSS `position:relative;`
- drag/drop `DIV` element just before the `h1` element
- give that div a class something like `jumbotron-overlay`
- create a CSS rule for `jumbotron-overlay`
- 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:
- CSS3 Multiple Backgrounds
- create a transparent pixel.gif image of the color and transparency you want.
- import the pixel.gif file to your project
- (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