背景图像的边框以及滚动

Question

我有一个联系我们的表格，其中包含以下 css。

border:30px solid #fff;
background-clip: content-box;
height:100%;
background:url(../Gallery_files/back.png); 
background-position: center;     
background-repeat:no-repeat;
background-size:cover;  
background-attachment: fixed;
overflow-y: inherit;
z-index:1;

问题是，我能够得到适合屏幕的整个图像的边框，但是在屏幕尺寸之后，边框被切掉了（滚动一下，一旦我向下滚动，边框就没有了来了）。

Answer 1

不滚动

html,body{
border:30px solid #fff;
background-clip: content-box;
height:87%;
background: url(img1.jpg); 
background-position: center;     
background-repeat:no-repeat;
background-size:cover;  
background-attachment: fixed;
overflow-y: inherit;
z-index:1; 
    }

滚动

.scroll-box {
    background: #f4f4f4;
    width: 900px;
    margin:100px;
    height: 700px; 
    padding: 15px;
    border:30px solid #000;
    background: url(cat.jpg);
    background-size:cover; 
 }

<body>
   <div class="scroll-box">
 </div>
</body>

背景图像的边框以及滚动

Border for background image along with scrolling

html

css

background

border

background-image