<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 {
display: grid;
    width: 100%;
    height: 291px;
}

div > * {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
}
        
 img {
       object-fit: cover;
       height: 100%;
       width: 100%;
}

  h1 {
    text-align: center;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.