Background image, without using background-image

Question

In the code below you will see the solution of @hugocsl to another question my. What I am wanting to do now is to put in this element, a background image without using background-image but with <img> fluid, responsive, so that the centered text is always proportional to the image.

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.artigo-main {
    height: 100%;
    width: 100%;
    display: table;
    text-align: center;
}
.artigo-content {
    display: table-cell;
    vertical-align: middle;
    background: #fff;
    color: #666666;
    border: 1px solid #F0F0F0;
}
.artigo-inner {
    margin: auto;
    width: 90%;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="artigo-main">
    <div class="artigo-content ">
        <div class="artigo-inner">
            <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula.</a></h3>
            <p>Abril 26, 2018</p>
        </div>
    </div>
</div>

Answer 1

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.artigo-main {
    height: 100%;
    width: 100%;
    text-align: center;
    position: relative;
}
.artigo-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%)
}
.artigo-inner {
    margin: auto;
    width: 90%;
}

.my-background{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%)
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="artigo-main">
    <img class="my-background" src="https://img.elo7.com.br/product/zoom/FBCE34/adesivo-paisagem-praia-decorando-com-adesivos.jpg">
    <div class="artigo-content ">
        <div class="artigo-inner">
            <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula.</a></h3>
            <p>Abril 26, 2018</p>
        </div>
    </div>
</div>

Answer 2

I would do with position:absolute and placing height and width with min- 100% to always occupy the entire size of the Father and maintain the "Aspect ratio"! But to get good you have to put overflow:hidden in Html and Body (it may not be possible in certain situations to do so).

Take the example: (Display under "Whole Page" to better understand)

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.artigo-main {
    height: 100%;
    width: 100%;
    display: table;
    text-align: center;
}
.artigo-content {
    display: table-cell;
    vertical-align: middle;
    color: #666666;
    border: 1px solid #F0F0F0;
    overflow: hidden;
}
.artigo-inner {
    margin: auto;
    width: 90%;
}
.artigo-inner img {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    min-height: 100%;
    min-width: 100%;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous" />

<div class="artigo-main">
    <div class="artigo-content ">
        <div class="artigo-inner">
            <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus at eleifend leo. Praesent eu ex ligula.</a></h3>
            <p>Abril 26, 2018</p>
            <img src="http://placecage.com/500/500" alt="">
        </div>
    </div>
</div>

Answer 3

You can inject directly via css you create a class in css looks like this:

.suaClase {background: url(imagens/imagem.gif) no-repeat;},

There you go shaping the css according to what you need;