html - tutorial - Ajustar el tamaño de fondo en el vuelo estacionario

poner imagen de fondo en html que ocupe toda la pantalla

Question

Cuando pasas el cursor sobre la imagen, verás que será reemplazada por el fondo semitransparente en mi código.

Se supone que el fondo transparente cubre toda la imagen, sin embargo, solo cubre el área tomada por el texto.

¿Cómo me aseguro de que cubra la imagen completa, independientemente del texto dentro de la caja?

/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
display: table;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 20px;
font-family: Roboto;
line-height: 24px;
font-weight: 200;
text-align: center;
overflow-y: auto;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
box-sizing: border-box;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
overflow-y: auto;
}
div.text-content div {
display: block;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover div.text-content {
opacity: 1;
}
/* Events page */
/*Event link button*/
.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}
.btn:link {
color: #ffffff;
text-decoration: none;
}
.btn:visited {
color: #1b1c16;
text-decoration: none;
}
.btn:hover {
background-color: #ffffff;
color: #1b1c16 !important;
}
.btn:active {
position: relative;
top: 1px;
}
/*All events button*/
.evens_btn {
background: ;
}
.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}
.events_btn>i{
color: #ffffff;
margin-right: 15px;
font-size: 50px;
}
.events_btn:link>i {
color: #f9c70f;
}
.events_btn:visited>i {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>i {
color: #f9c70f;
}
.events_btn:active>i {
color: #f9c70f;
}
.events_btn:link>span {
color: #f9c70f;
}
.events_btn:visited>span {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>span {
color: #f9c70f ;
}
.events_btn:active>span {
color: #f9c70f;
}

<ul class="img-list">
<li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" />
<div class="text-content">
<div>
<h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5>
<hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand''s theory of natural rights? Tune in to our videos for answers to these questions and many more.
<br>
<a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank">READ MORE</a>
</div>
</div>
</li>
</ul>

Answer 1

Eliminar display: table; y para alinear el contenido verticalmente, use la propiedad de align-content de align-content CSS Flexbox.

Eche un vistazo al fragmento a continuación:

/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
display: flex;
align-items: center;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 20px;
font-family: Roboto;
line-height: 24px;
font-weight: 200;
text-align: center;
overflow-y: auto;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
box-sizing: border-box;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
overflow-y: auto;
}
div.text-content div {
display: block;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover div.text-content {
opacity: 1;
}
/* Events page */
/*Event link button*/
.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}
.btn:link {
color: #ffffff;
text-decoration: none;
}
.btn:visited {
color: #1b1c16;
text-decoration: none;
}
.btn:hover {
background-color: #ffffff;
color: #1b1c16 !important;
}
.btn:active {
position: relative;
top: 1px;
}
/*All events button*/
.evens_btn {
background: ;
}
.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}
.events_btn>i{
color: #ffffff;
margin-right: 15px;
font-size: 50px;
}
.events_btn:link>i {
color: #f9c70f;
}
.events_btn:visited>i {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>i {
color: #f9c70f;
}
.events_btn:active>i {
color: #f9c70f;
}
.events_btn:link>span {
color: #f9c70f;
}
.events_btn:visited>span {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>span {
color: #f9c70f ;
}
.events_btn:active>span {
color: #f9c70f;
}

<ul class="img-list"><li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" /><div class="text-content"><div><h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5><hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand''s theory of natural rights? Tune in to our videos for answers to these questions and many more.<br><a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank">READ MORE</a></div></div></li></ul>

¡Espero que esto ayude!

Answer 2

Solo agrega este Css:

.text-content div{
height:1326px;
}

Answer 3

/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
left: 0;
position: absolute;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 20px;
font-family: Roboto;
line-height: 24px;
font-weight: 200;
text-align: center;
overflow-y: auto;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
box-sizing: border-box;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
overflow-y: auto;
}
div.text-content div {
display: table-cell;
text-align: center;
vertical-align: middle;
width: 100%;
height: 100%;
}
ul.img-list li:hover div.text-content {
opacity: 1;
}
/* Events page */
/*Event link button*/
.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 28px;
font-size: 24px;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}
.btn:link {
color: #ffffff;
text-decoration: none;
}
.btn:visited {
color: #1b1c16;
text-decoration: none;
}
.btn:hover {
background-color: #ffffff;
color: #1b1c16 !important;
}
.btn:active {
position: relative;
top: 1px;
}
/*All events button*/
.evens_btn {
background: ;
}
.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 24px !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}
.events_btn>i{
color: #ffffff;
margin-right: 15px;
font-size: 50px;
}
.events_btn:link>i {
color: #f9c70f;
}
.events_btn:visited>i {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>i {
color: #f9c70f;
}
.events_btn:active>i {
color: #f9c70f;
}
.events_btn:link>span {
color: #f9c70f;
}
.events_btn:visited>span {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>span {
color: #f9c70f ;
}
.events_btn:active>span {
color: #f9c70f;
}

<ul class="img-list"><li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" /><div class="text-content"><div><h5 style="color: white; font-size: 38px; font-family: Montserrat; font-weight: 600; line-height: 42px; letter-spacing: 2px;">WEBINAR<br/>ARCHIVE</h5><hr style="border-top: 2px solid #ffffff; width: auto; margin: 10px 30px;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand''s theory of natural rights? Tune in to our videos for answers to these questions and many more.<br><a class="btn" style="color: white; text-align: center; margin-top: 10px; padding-top: 5px; padding-bottom: 5px; padding-left: 30px; padding-right: 30px; text-decoration: none; font-size: 24px; font-weight: 600; border: 3px solid white; letter-spacing: 2px;" href="http://www.google.com/" target="_blank">READ MORE</a></div></div></li></ul>

Answer 4

Eliminar display:table; de .text-content . También agregue el bottom:0; lo.