Why you don't want to have it an img?

Why you don't want to have it an img?

/* remove Following css from these classes */
/*
.main_container {
   position: relative;
}

.content_section {
  position: absolute;
  top: 0;
}

/*

/* visibility: hidden; into display: none; */

/*
.invisible {
  visibility: hidden;
  display: none;
}
*/

/* you will see that, Although image height is there footer went up close to the cards 

1. one of the solution i found is adding padding or margin to keep space between image section and footer.
but we Don’t know how much is the space remains after the card section. so it Could be a hardcoded one.

2. Solution i tried is added a dummy img that will occupy th height same as image height then the footer comes after the image section.
but here i have to use position attributes to move content on the top of img tag.


Is there any another way around to keep the div/element height same as the background-image height even though the content height is less that image one ??
so that the remaining space will be as a buffer between the element( that has background-image) & next element/footer( in eg its footer) element.
*/

/* remove Following css from these classes */
/*
.main_container {
   position: relative;
}

.content_section {
  position: absolute;
  top: 0;
}

/*

/* visibility: hidden; into display: none; */

/*
.invisible {
  visibility: hidden;
  display: none;
}
*/

/* you will see that, Although image height is there footer went up close to the cards 

1. one of the solution i found is adding padding or margin to keep space between image section and footer.
but we Don’t know how much is the space remains after the card section. so it Could be a hardcoded one.

2. Solution i tried is added a dummy img that will occupy th height same as image height then the footer comes after the image section.
but here i have to use position attributes to move content on the top of img tag.


Is there any another way around to keep the div/element height same as the background-image height even though the content height is less that image one ??
so that the remaining space will be as a buffer between the element( that has background-image) & next element/footer( in eg its footer) element.
*/