rafavinu rafavinu - 2 months ago 6
CSS Question

Border for background image along with scrolling

I am having a contact us form with the following 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;


The problem is, I am able to get the border for the entire image which fits the screen, but after the screen size, the border is getting cut (Have a scroll and once i scroll down, the border is not coming).

Answer

Without scrolling

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; 
    }

With scrolling

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