How to create a pattern border around webpage, squarespace


Question

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(http://i.imgur.com/LhxKJpU.jpg);
background-repeat: tile; 

}

The template i'm using is Pacific.

Any ideas??

1
0
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:

<head>
<style>
body {
    margin:0px;
    background-image: url(http://i.imgur.com/LhxKJpU.jpg);
    }
.top, .left, .right, .bottom {
    display: block;
    position:absolute;
    width:100%;
    height:100%;
    }   
.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;
    }           
</style>
</head>
<body>
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</body>
</html>

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

1
4/1/2016 11:04:00 AM

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