Displaying content over an image-CodePudding

I have a <div> containing an arbitrary amount of content and an image. The image will serve as a background for all of the content. I need the following things to happen:

The content can be optionally centred vertically within the background image
If the content is shorter than the image, the height of the wrapping container will conform to the image
If the content is longer than the image, the image will be displayed as usually however the content will flow into whitespace below the image.

The way I've handled this at the moment is by making the content position: absolute and positioning it over the image. This checks the first two items off the list, however, it fails the third. The content will run into anything following or just be cut off.

A way around that is to move the position: absolute to the image. This supports the last one and kind of supports the second, while not entirely supporting the first. If the content is longer than the image, everything works and it's all good. If the content is shorter though, the image gets given a max height of the content. The image needs to always display at its full size and only limited by width, never height.

I know this can be solved with JavaScript by setting the heights of elements to the largest of either content or image, but I want to go for a pure CSS approach if at all possible.

So my question is, can this be done solely with HTML & CSS or will I need to bring JavaScript into the equation?

CodePudding user response：

If the image has no other purpose than serving as a background, you should display it not as an <img> tag, but a background-image. This way you could get rid of the position: absolute in the content and use proper positioning.

As for the variable height issue, as others have commented, you can simply add a min-height to the container so it will always be at least as tall as your image.

CodePudding user response：

The image will serve as a background for all of the content.

As @HelenaSánchez mentions, in this scenario, rather than an actual HTML <img> element, you may be better off using the CSS property:

background-image

If you then give your background image a dynamic size of cover:

background-size: cover

you will ensure that, regardless how small your background-image is in relation to your content, your background-image will expand to cover the dimensions of your container.

Working Example:

Run this example repeatedly to see different images:

.container {
  position: relative;
  display: inline-block;
  width: 260px;
  margin-right: 12px;
  padding: 12px;
  border: 1px solid rgb(191, 191, 191);
  vertical-align: top;
  background-image: url(https://picsum.photos/300/240);
  background-size: cover;
  background-position: center;
  background-clip: content-box;
}

.container p {
  position: relative;
  z-index: 6;
  padding: 0 12px;
  color: rgb(255, 255, 255);
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), -1px 1px 2px rgba(0, 0, 0, 0.5), -1px -1px 2px rgba(0, 0, 0, 0.5), 1px -1px 2px rgba(0, 0, 0, 0.5);
}

<div >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>

<div >
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

Further Reading: