Text and background-color overlay on image
I'm trying to create a solid-color overlay that exactly matches the size of an image, and display text on that overlay. I'd like to do this with HTML and CSS only, if possible. The image may be of any size, and will be sized to fit and centered within its parent container. Something like this (which does not work): HTML: <div class="img-overlay"> <img src="file.jpg"> <div class="overlay">Text will flow...</div> </div> CSS: .img-overlay img { margin: 0 auto; max-height: 100%; } .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100% background-color: rgba(255,255,255,0.5); } I