section#bg-img .photo {
  background: url(../../assets/image/flower.jpg);
  width: 500px;
  height: 200px;
}
section#bg-img .photowithbackground {
  background-image: url(../../assets/image/flower.jpg);
  background-size: 100% 66%;
  width: 400px;
  height: 200px;
  padding: 0px;
  margin: 20px 0px 0px 0px;
}
section#bg-img .photocontain {
  background-image: url(../../assets/image/lighthouse.jpg);
  background-color: red;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 400px;
  height: 200px;
  padding: 0px;
  margin: 20px 0px 0px 0px;
}
section#bg-img .photocover {
  background-image: url(../../assets/image/lighthouse.jpg);
  background-size: cover;
  width: 400px;
  height: 200px;
  padding: 0px;
  margin: 20px 0px 0px 0px;
}
section#bg-img .bg-postion {
  border: 1px solid black;
  width: 500px;
  height: 200px;
  margin: 20px 0px 0px 0px;
  background: no-repeat url(../../assets/image/THANKS.png) red;
  background-position: 50% 50%;
}
section#bg-img .example {
  width: 300px;
  border: 20px solid black;
  padding: 50px;
  margin: 20px 0px 0px 0px;
  background: url(../../assets/image/THANKS.png);
}
section#bg-img .example2 {
  background-origin: border-box;
}
section#bg-img .example3 {
  background-origin: content-box;
}