How do I set the background image of a div into two diagonally-separated images?

Question

I have the following HTML/SASS structure:

HTML

<div id="games">
  <a class="gameplate" href="#">
    <h3>MIA <span class="at">@</span> HOU</h3>
    <h3>90&nbsp;&nbsp;-&nbsp;&nbsp;104</h3>
    <p>4th Qtr</p>
    <p>4:55 </p>
    <div class="gameplate--padding"></div>
  </a>
</div>

CSS

#games {
  border-bottom: 1px solid black;
  height: 130px;
  vertical-align: middle;
  text-align: center;
}
#games .gameplate {
  border: 1px solid gray;
  display: inline-block;
  width: 120px;
  text-align: center;
  margin: 5px 3px;
  color: #222222;
  text-decoration: none;
}
#games .gameplate h3 {
  margin-top: 10px;
  margin-bottom: -10px;
}
#games .gameplate h3 .at {
  font-size: 12px;
  color: #999999;
}
#games .gameplate p {
  margin-top: 5px;
  margin-bottom: -5px;
  font-size: 14px;
}
#games .gameplate--padding {
  height: 20px;
}

JSFiddle: https://jsfiddle.net/b4Lmdh4y/

I'm trying to figure out how I would add diagonally split images to the games div that would appear behind the text. So basically as an example, say I'm trying to take the following two images:

https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/2000px-Red.svg.png

https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Solid_black.svg/2000px-Solid_black.svg.png

and I'm trying to set the background of the games div to look like this:

I would still like the text to appear in front of these images.

Answer 1

It's not very easy. Take a look at this example using transform http://codepen.io/Dionmm/pen/Wrrewr

/*Rotate this div and position it to cut the rectangle in half*/
.image2{
  transform: rotate(329.1deg);
  position: absolute;
  top: 115px;
  left: 77px;
  overflow: hidden;
  height: 500px;
  width: 600px;
}
/*Apply exact opposite amount of rotation to the .image2 class so image appears straight */
/*Also align it with the top of the rectangle*/
.image2 img{
  transform: rotate(30.9deg);
  position: absolute;
  top: -150px;
}