Background Gradient Not Applying - html

Question

I'm trying to get the reddish gradient to work on the background image. There's an initial fallback image, and then this appended to the next background image: , linear-gradient(0deg,rgba(0,0,0,0.68),rgba(221,51,51,0.8)); - why is this not applying the gradient?
* {
color: #000000;
margin: 0px;
padding: 0px;
font-family: 'Open Sans',verdana,helvetica,arial,sans-serif;
font-size: 100%;
box-sizing: border-box;
}
.sadLeader {
width: 1088px;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 10px;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"); /* fallback */
background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"), linear-gradient(#eb01a5, #d13531);
background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"), linear-gradient(0deg,rgba(0,0,0,0.68),rgba(221,51,51,0.8));
}
.sadLeader h3 {
font-size: 46px;
line-height: 56px;
font-weight: 400;
}
.sadLeader p {
font-size: 25px;
line-height: 28px;
margin: 25px 0;
}
.sadLeader span {
background: red;
display: flex;
}
.sadLeader span button {
color: #000;
background-color: #fff;
transition: all 0.3s ease;
font-size: 15px;
height: 55px;
padding: 0 36px;
border: none;
}
#media (min-width: 768px) {.sadLeader span button:nth-of-type(2) { margin-left: 5% }}
#media (max-width: 767px) {
.sadLeader span { flex-direction: column }
.sadLeader span button:nth-of-type(2) { margin-top: 5% }
}
<div class="sadLeader">
<h3>Some text</h3>
<p>Some more text to go here</p>
<span>
<button>Button 1</button>
<button>Another button here...</button>
</span>
</div>

Answer 1

* {
color: #000000;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', verdana, helvetica, arial, sans-serif;
font-size: 100%;
box-sizing: border-box;
}
.sadLeader {
width: 1088px;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 10px;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg");
/* fallback */
background-image: linear-gradient(#eb01a5, #d13531), url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg");
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.68), rgba(221, 51, 51, 0.8)), url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg");
}
.sadLeader h3 {
font-size: 46px;
line-height: 56px;
font-weight: 400;
}
.sadLeader p {
font-size: 25px;
line-height: 28px;
margin: 25px 0;
}
.sadLeader span {
background: red;
display: flex;
}
.sadLeader span button {
color: #000;
background-color: #fff;
transition: all 0.3s ease;
font-size: 15px;
height: 55px;
padding: 0 36px;
border: none;
}
#media (min-width: 768px) {
.sadLeader span button:nth-of-type(2) {
margin-left: 5%
}
}
#media (max-width: 767px) {
.sadLeader span {
flex-direction: column
}
.sadLeader span button:nth-of-type(2) {
margin-top: 5%
}
}
<div class="sadLeader">
<h3>Some text</h3>
<p>Some more text to go here</p>
<span>
<button>Button 1</button>
<button>Another button here...</button>
</span>
</div>
Is this what you are after?

Answer 2

Your background-image covers the whole container (background-size: cover;), so the gradient won't become visible. It would be visible around the image if the image were smaller, not covering the container. To have the image only as a fallback, notate it as below.
* {
color: #000000;
margin: 0px;
padding: 0px;
font-family: 'Open Sans',verdana,helvetica,arial,sans-serif;
font-size: 100%;
box-sizing: border-box;
}
.sadLeader {
width: 1088px;
height: 450px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
padding: 10px;
text-align: center;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"); /* fallback */
background-image: url("https://media.cntraveler.com/photos/5a0efefba15d3804847cb88b/master/w_1200,c_limit/elephant-vid-tout.jpg"), linear-gradient(#eb01a5, #d13531);
background-image: linear-gradient(0deg,rgba(0,0,0,0.68),rgba(221,51,51,0.8));
}
.sadLeader h3 {
font-size: 46px;
line-height: 56px;
font-weight: 400;
}
.sadLeader p {
font-size: 25px;
line-height: 28px;
margin: 25px 0;
}
.sadLeader span {
background: red;
display: flex;
}
.sadLeader span button {
color: #000;
background-color: #fff;
transition: all 0.3s ease;
font-size: 15px;
height: 55px;
padding: 0 36px;
border: none;
}
#media (min-width: 768px) {.sadLeader span button:nth-of-type(2) { margin-left: 5% }}
#media (max-width: 767px) {
.sadLeader span { flex-direction: column }
.sadLeader span button:nth-of-type(2) { margin-top: 5% }
}
<div class="sadLeader">
<h3>Some text</h3>
<p>Some more text to go here</p>
<span>
<button>Button 1</button>
<button>Another button here...</button>
</span>
</div>