<div class="bubble">
  <div class="bubble-bg"></div>
  <div class="bubble-content">
    A speech bubble of dynamic height, with a background image that stops at the arrow.
.bubble {
  width: 300px;
  position: relative;
  background-color: #ccc;

.bubble:before {
  position: absolute;
  content: '';
  border: 10px solid transparent;
  border-left-color: #ccc;
  border-right: 0;
  left: 100%;
  top: 50%;
  margin-top: -10px;

.bubble-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('https://unsplash.it/400/200?image=0&blur');
  background-size: cover;
  background-position: center;

.bubble-content {
  position: relative;
  padding: 20px;
  color: #fff;

body {
  margin: 20px;
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.