[Solved] Background Image Border Styling through CSS

by


There are 3 ways of doing this in my knowledge:

  1. Old way – using order in :after and :before
.bg-box {
  position: relative;
  background: url(https://static.pexels.com/photos/20974/pexels-photo.jpg) no-repeat 100%;
  width: 500px;
  height: 400px;
  ;
  display: inline-block;
}

.bg-box:after,
.bg-box:before {
  content: '';
  position: absolute;
}

.bg-box:before {
  top: 0px;
  left: 0px;
  border-right: 500px solid rgba(221, 221, 221, 0);
  border-top: 60px solid #fff;
}

.bg-box:after {
  bottom: 0px;
  left: 0px;
  border-right: 500px solid #fff;
  border-top: 60px solid rgba(243, 245, 246, 0);
}
<div class="bg-box"></div>
  1. Using transform: matrix to the element.
.bg-box-2 {
  position: relative;
  background: url(https://scontent.fmaa1-1.fna.fbcdn.net/v/t1.0-0/s480x480/10492499_766836143367679_5870385788438363650_n.jpg?oh=8c5e7a0b24c74fea881b7c9c5bbcc246&oe=5A424EF7) no-repeat 100%;
  width: 500px;
  height: 400px;
  ;
  display: inline-block;
  /* IE 9 */
  -ms-transform: matrix(1, -0.1, 0, 1, 0, 0) ;       
  /* Safari */
  -webkit-transform: matrix(1, -0.1, 0, 1, 0, 0);       
  /* Standard syntax */
  transform: matrix(1, -0.1, 0, 1, 0, 0) 
}
<div class="bg-box-2"></div>
  1. Using transform: matrix to the element’s :after and :before for best result.
.bg-box-3{
  position: relative;
  background: url(http://webneel.com/wallpaper/sites/default/files/images/04-2013/island-beach-scenery-wallpaper.preview.jpg) no-repeat 100%;
  width: 500px;
  height: 400px;
  ;
  display: inline-block;
  overflow:hidden;
}
.bg-box-3:after,
.bg-box-3:before {
  content: '';
  position: absolute;
  width:100%;
  height:20%;
  background:#fff;
}
.bg-box-3:before{
  top: -3%;
  /* IE 9 */
  -ms-transform: matrix(1, -0.1, 0, 1, 0, 0);      
  /* Safari */
  -webkit-transform: matrix(1, -0.1, 0, 1, 0, 0);      
  /* Standard syntax */
  transform: matrix(1, -0.1, 0, 1, 0, 0);
}  
.bg-box-3:after{
  bottom:-3%;
  /* IE 9 */
  -ms-transform: matrix(1, -0.1, 0, 1, 0, 0);      
  /* Safari */
  -webkit-transform: matrix(1, -0.1, 0, 1, 0, 0);      
  /* Standard syntax */
  transform: matrix(1, -0.1, 0, 1, 0, 0);
}  
<div class="bg-box-3"></div>

You can use preferred method in your project. Hope this was helpful for you to understand this trick.

1

solved Background Image Border Styling through CSS