<div class="content">
  Stars &amp; Stripes
</div>
body {
  margin:0;
  overflow:hidden;
}

/* Stars background pattern by Nicholas Gallagher */

body:before {
  animation: counter 10s infinite linear;
  background:
linear-gradient(324deg, #226 4%,   transparent 4%) -70px 43px,
linear-gradient( 36deg, #226 4%,   transparent 4%) 30px 43px,
linear-gradient( 72deg, #eee 8.5%, transparent 8.5%) 30px 43px,
linear-gradient(288deg, #eee 8.5%, transparent 8.5%) -70px 43px,
linear-gradient(216deg, #eee 7.5%, transparent 7.5%) -70px 23px,
linear-gradient(144deg, #eee 7.5%, transparent 7.5%) 30px 23px,

linear-gradient(324deg, #226 4%,   transparent 4%) -20px 93px,
linear-gradient( 36deg, #226 4%,   transparent 4%) 80px 93px,
linear-gradient( 72deg, #eee 8.5%, transparent 8.5%) 80px 93px,
linear-gradient(288deg, #eee 8.5%, transparent 8.5%) -20px 93px,
linear-gradient(216deg, #eee 7.5%, transparent 7.5%) -20px 73px,
linear-gradient(144deg, #eee 7.5%, transparent 7.5%) 80px 73px;
background-color: #226;
background-size: 100px 100px;
  bottom:-100vmin;
  content:"";
  left:-100vmin;
  position:absolute;
  right:-100vmin;
  top:-100vmin;
}

body:after {
  animation: fadeInOut 10s infinite linear;
  background-image: repeating-linear-gradient(
      #fff,
      #fff 5vh,
      #c00 5vh,
      #c00 10vh);
  bottom:-100vmin;
  content:"";
  left:-100vmin;
  position:absolute;
  right:-100vmin;
  top:-100vmin;
}

@keyframes fadeInOut {
  0% {
    opacity:.1;
  }
  50% {
    opacity:.9;
  }
  100% {
    opacity:.1;
    transform:rotate(360deg);
  }
}

@keyframes counter {
  100% {
    transform:rotate(-360deg);
  }
}

.content {
  background-color:#fff;
  font-family:Georgia;
  font-size:2em;
  font-variant:small-caps;
  font-weight:bold;
  letter-spacing:.25em;
  margin:1em;
  padding:1em;
  position:relative;
  text-align:center;
  z-index:1;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.