Scale div to background-image height

Question

I\'ve got a page using a background-image. background-size is set to cover.

The content is just a heading and two buttons. I want the div to b

Answer 1

You can use one same image file for both background and inline, and set the inline image to visibility: hidden; (keep space), so the div can automatically resize based on the image size.

There is no way to detect the background image size with CSS.

.container {
  background: url("https://picsum.photos/600/150?image=0") 0 0 no-repeat;
  background-size: cover;
  position: relative;
  border: 1px solid red;
  overflow: hidden;
}

.image {
  visibility: hidden;
}

.title {
  position: absolute;
  width: 100%;
  background: rgba(255, 255, 255, .5)
}

  
Hello