Mobile app version of vmapp.org
Login or Join
Sherry646

: 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

@Sherry646

Posted in: #Css #HowTo #WebsiteDesign #WebsiteTemplates

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:



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??

10.01% popularity Vote Up Vote Down

Login to follow query

More posts by @Sherry646

Login to post a comment!

1 Comments

Sorted by latest first Latest Oldest Best

 

@Becky351

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



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

10% popularity Vote Up Vote Down

Back to top | Use Dark Theme