Cette méthode porte parfaitement son nom. Il vous suffit, tout simplement, d’utiliser le positionnement absolu sur une balise img normale pour donner l’impression d’avoir utilisé la propriété background-image de CSS. Tout ce que vous avez à faire, c’est de positionner l’image à l’intérieur d’un conteneur position: relative;. Voici à quoi ressemble généralement le balisage HTML :

<div class="demo_wrap">
  <h1>Hello World!</h1>
  <img src="https://assets.digitalocean.com/labs/images/community_bg.png" />
</div>

Et voici à quoi ressemblera votre CSS :

.demo_wrap {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border: 1px dashed green;
}
.demo_wrap h1 {
    padding: 100px;
    position: relative;
    z-index: 2;
}
.demo_wrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    opacity: 0.6;
}

Ici, l’astuce est de positionner l’img de manière absolue et de l’étirer jusqu’à remplir l’intégralité du conteneur parent. Et de positionner relatively tout le reste de façon à pouvoir configurer un z-index qui le positionnera au-dessus de l’img.

Voici une démo en direct :

Hello World!

Une fois que vous saurez comment ça marche, cette méthode est relativement simple à comprendre. Il s’agit sans nul doute de la méthode que je préfère. En utilisant les pseudo-éléments CSS :before ou :after, vous obtenez un div avec une image d’arrière-plan et configurez une opacité au-dessus. Voici à quoi devrait ressembler votre balisage HTML :

<div class="demo_wrap">
  <h1>Hello World!</h1>
</div>

Et voici à quoi ressemble le CSS :

   .demo_wrap {
    position: relative;
    background: #5C97FF;
    overflow: hidden;
}
.demo_wrap h1 {
    padding: 50px;
    position: relative;
    z-index: 2;
}
/* You could use :after - it doesn't really matter */
.demo_wrap:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png');
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: cover;
}

Ici, nous devons à nouveau déplacer le z-index de contenu (dans le cas présent, le <h1>) au-dessus du pseudo-élément de l’arrière-plan et explicitement configurer la position: absolute; et le z-index: 1 sur le pseudo-élément :before.

Les autres attributs du pseudo-élément sont là pour le positionner de manière à chevaucher à 100 % le parent. Ils peuvent également utiliser une nouvelle propriété CSS intelligente : background-size: cover qui dimensionne l’arrière-plan de manière à couvrir l’élément sans en changer les proportions. Voici une belle petite démo de cette méthode :