Can you use HTML as a background as you can use SVG as a background?

Question

Can you use HTML as a background as you can use SVG as a background?

SVG as background example:

.element {
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='red' points='0,20 100,0 100,80 0,100'/%3E%3C/svg%3E");
}

.element {
    background-image: url(/images/image.svg);
}

HTML as background example:

.element {
    background-image: url("data:html, %3Cdiv%3EHello%3C/div%3E");
}

.element {
    background-image: url(/stuff.html);
}

.element {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon fill='rgba(0,0,255,.5)' points='0,20 100,0 100,80 0,100'/%3E%3C/svg%3E");
}

.element2 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("%3Cdiv%3EHello%3C/div%3E");
}


div {
  outline: 1px dashed blue;
}

<div class="element">Aliquam convallis nulla dui, vel efficitur ante mollis et. Ut ornare mauris sit amet tellus eleifend placerat. Nullam bibendum orci at erat tristique, id condimentum nisl consectetur. Ut eleifend a enim ut malesuada. Curabitur a massa ipsum. In hac habitasse platea dictumst. Pellentesque pellentesque accumsan massa non commodo. Ut sit amet tellus non lectus accumsan pellentesque nec in ipsum. Cras pulvinar tortor non odio semper rhoncus. Aenean id arcu imperdiet dolor volutpat semper sed eu neque. Aenean risus elit, auctor id elementum a, cursus ut metus.</div>

<div class="element2">Aliquam convallis nulla dui, vel efficitur ante mollis et. Ut ornare mauris sit amet tellus eleifend placerat. Nullam bibendum orci at erat tristique, id condimentum nisl consectetur. Ut eleifend a enim ut malesuada. Curabitur a massa ipsum. In hac habitasse platea dictumst. Pellentesque pellentesque accumsan massa non commodo. Ut sit amet tellus non lectus accumsan pellentesque nec in ipsum. Cras pulvinar tortor non odio semper rhoncus. Aenean id arcu imperdiet dolor volutpat semper sed eu neque. Aenean risus elit, auctor id elementum a, cursus ut metus.</div>

Answer 1

SVG <foreignObject>

You can embed HTML in SVG using <foreighObject> and then use the SVG as background image:

body {
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E div %7B color: white; font: 18px serif; height: 100%25; overflow: auto; %7D %3C/style%3E%3Cpolygon points='5,5 195,10 185,185 10,195' /%3E%3C!-- Common use case: embed HTML text into SVG --%3E%3CforeignObject x='20' y='20' width='160' height='160'%3E%3C!-- In the context of SVG embedded in an HTML document, the XHTML namespace could be omitted, but it is mandatory in the context of an SVG document --%3E%3Cdiv xmlns='http://www.w3.org/1999/xhtml'%3E Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum imperdiet eros. Aliquam erat volutpat. %3C/div%3E%3C/foreignObject%3E%3C/svg%3E");
  background-size: 100%;
}

The element() CSS function

CSS4 has the element() draft which allows you take an element by its id, and use it as an image.

Example (currently Firefox only):

<div style="width:400px; height:400px; background:-moz-element(#myBackground1) no-repeat;">
  <p>This box uses the element with the #myBackground1 ID as its background!</p>
</div>

<div style="overflow:hidden; height:0;">
  <div id="myBackground1" style="width:1024px; height:1024px; background-image: linear-gradient(to right, red, orange, yellow, white);">
    <p style="transform-origin:0 0; transform: rotate(45deg); color:white;">This text is part of the background. Cool, huh?</p>
  </div>
</div>