<div class="bg bg1"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>
<div class="bg bg4"></div>
$img: 'https://user-images.githubusercontent.com/8554143/34104896-4442e35e-e42d-11e7-80e8-3cf98219f23d.gif';
$img2: 'https://user-images.githubusercontent.com/8554143/34146030-68a604c8-e4d3-11e7-90d1-1f025efc6f40.gif';

div {
    width: 300px;
    height: 300px;
    margin: 50px;
    float: left;
    box-sizing: border-box;
}

.bg1 {
    border-radius: 50%;
    border: 5px solid #000;
    background: url($img),
        linear-gradient(45deg, #fff 0%, #fff 50%, #000 50%, #000 100%);
    background-size: 280px 280px, 25% 25%;
    background-position: center;
    background-repeat: no-repeat, repeat;
    background-blend-mode: difference;
}

.bg2 {
    border: 5px solid #000;
    background: url($img),
        linear-gradient(#fff 0%, #fff 50%, #000 50%, #000 100%);
    background-size: 280px 280px, 25% 25%;
    background-position: center;
    background-repeat: no-repeat, repeat;
    background-blend-mode: difference;
}

.bg3 {
    border-radius: 50%;
    border: 5px solid #000;
    background: url($img),
        linear-gradient(90deg, #fff 0%, #fff 50%, #000 50%, #000 100%);
    background-size: 280px 280px, 10% 10%;
    background-position: center;
    background-repeat: no-repeat, repeat;
    background-blend-mode: difference;
}

.bg4 {
    border: 5px solid #000;
    background: url($img2),
        linear-gradient(45deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);
    background-size: 280px 280px, 20% 20%;
    background-position: center, 50% 50%, 50% 50%;
    background-repeat: no-repeat, repeat, repeat;
    background-blend-mode: difference;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.