<div>
<picture>
  <source srcset="https://assets.codepen.io/429997/abstract_space.jpeg?width=896&height=539&format=avif" type="image/avif"
>
  <img 
src="https://assets.codepen.io/429997/abstract_space.jpeg?width=896&height=539&format=auto
" alt="">
</picture>
  <h1>Example text over image</h1>
</div>
body {
  margin: 0;
  color: white;
  font-family: system-ui, sans-serif;
}       

div {
position: relative;
    width: 100%;
    height: 291px;
}
        
 img {
       position: absolute;
       object-fit: cover;
       height: 100%;
       width: 100%;
}

  h1 {
       position: relative;
    text-align: center;
    margin: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.