How to create a pattern border around webpage, squarespace


I'm trying to create a specific border around a squarespace page so that is responsive (i don't want to add an image as it wouldn't adapt to other devices) This is what I am hoping for:

web frames

I currently can only get a solid double border reaching the edges of the page with minimal spacing between the lines - about half of what I'm hoping for.

So far this is the code i've inserted into the custom css:

#footer {display:none;}
body {
border: 1em double #ffffff;
padding: 0px;
margin: 0px;
background-image: url(;
background-repeat: tile; 


The template i'm using is Pacific.

Any ideas??

4/1/2016 2:31:00 AM

You cant do that Directly with CSS over the body tag directly, you have re-structure you html body to achieve the desire effect.

All you have to do is four different DIV's overlapped over each others and each DIV deal with a single border, DIV for have only one border on top position and the other have it on the right position and so one.

here is my solution:

body {
    background-image: url(;
.top, .left, .right, .bottom {
    display: block;
.top {
    border-top: 1em double #fff; top: 40px; z-index:100;
.left {
    border-left: 1em double #fff; left: 40px; z-index:200;
.right {
    border-right: 1em double #fff; right: 40px; z-index:300;
.bottom {
    border-bottom: 1em double #fff; bottom: 40px; z-index:400;
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>

and here is my result

enter image description here

by the way there is no tile value for repeating a background. you have to choose between repeat-x repeat-y no-repeat and repeat

4/1/2016 11:04:00 AM

Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow