<h2>Image Background</h2>
<div id="imageonly">
  <!-- image is from Subtle Patterns -->

<h2>Gradient Background: Linear</h2>
<div id="linear-gradient">

<h2>Gradient Background: Radial</h2>
<div id="radial-gradient">

<h2>Multiple Backgound Images</h2>
<p>Two images: CodePen logo &amp; off-white pattern.</p>
<div id="multiimage">
/* image background */
#imageonly {
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/confectionary.png);

/* linear gradient background */
#linear-gradient {
  background: linear-gradient(black, white);

/* radial gradient background */
#radial-gradient {
  background: radial-gradient(circle, black, white);

/*multiple background images */

#multiimage {
   url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/codepen.png) bottom center no-repeat,
   url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/confectionary.png) repeat; 

/* styling for the Pen, unrelated to background */
body { font-family: sans-serif; }

div {
  width: 300px;
  height: 300px;
  margin-bottom: 1.5em;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.