I'm trying to create a body border pretty much exactly like the one in this example: it changes with the size of the window, but isn't affected by overflow.
https://css-tricks.com/examples/BodyBorder/
I can't find any information on how to do this with a border-image specifically, though. I've already got my border-image and its parameters all set up; I just can't figure out how to apply it to the body without being broken by overflow, all the snippets of code I've tried have either prevented scrolling entirely, such that overflow simply disappears above the page, or have failed to prevent the border from being interrupted by overflow.
It'd be nice if, to boot, there were some convenient way to have an area at the edge of the border where overflow text will fade.
Edit: adding style code. In response to one of the comments, I want to use an image specifically--a border image, not just color. I'm just wanting to adapt the border image style I already have working.
<!DOCTYPE html>
<html>
<head>
<style>
p {
white-space: ;
color: white;
word-break: break-all;
font-weight: normal; text-shadow: .3vw .3vw #000000; font-size: 4vw; text-align: center; margin: 4vw;
}
body {
border: 1px solid transparent;
padding: 0px;
border-image: url(border.png) 10% round;
border-image-slice: 26 26 26 26;
border-image-width: 3vw 3vw 3vw 3vw;
border-image-outset: 0px 0px 0px 0px;
border-image-repeat: stretch stretch;
display: flex;
flex-direction: column-reverse;
overflow: auto;
}
html {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #70bg32;
background-repeat: no-repeat;
background: -webkit-linear-gradient(#6363BD, #000052);
background: -moz-linear-gradient(#6363BD, #000052);
background: -ms-linear-gradient(#6363BD, #000052);
background: -o-linear-gradient(#6363BD, #000052);
background: linear-gradient(#6363BD, #000052);
}
</style>
You could use a separate element for the effect, instead of styling
bodydirectly.