<div class="css" id="css-source">
  <p contenteditable>This is the source element. The content is editable.</p>
  <img src="https://unsplash.it/150/150?image=52" alt="">
</div>
<div class="css" id="css-result"></div>
<p class="note">Only works in Firefox</p>

.css {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  max-width: 90%;
  margin: 10px;
  padding: 20px;
}
#css-source {
  width: 200px;
  background: rgba(0,0,0,.1);
}
#css-result {
  width: 350px;
  height: 250px;
  border: 5px dashed #555;
  background: -moz-element(#css-source);
  background-size: 50% 100%;
}

/* cosmetic */
html {
  font: 1em sans-serif;
  text-align: center;
  margin: 50px 0;
}
p {
  margin: 0;
}
img {
  margin: 20px 0 0 0;
  max-width: 100%;
}
.note {
  color: #aaa;
  margin: 50px;
}
::-moz-selection {
  background: deeppink;
  color: #fff;
}