<header>
<div class="container">
</div>
</header>
<main>
<section>
<div class="container">
<h1>SVG Background Pattern</h1>
</div>
</section>
</main>
<footer>
<div class="container">
</div>
</footer>
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
$container-width: 1000px;
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #1b0836;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%233d1978' fill-opacity='1' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E");
//background-attachment: fixed;
font-family: 'Open Sans', sans-serif;
}
.container {
max-width: $container-width;
margin: 0 auto;
padding: 0 20px;
}
.screen-reader-text {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}
section {
height: 200vh;
color: #fff;
}
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
}
View Compiled
;(function($){
$(function(){
console.log( 'I was fucking born ready!' );
});
})(jQuery);
This Pen doesn't use any external CSS resources.