How do I make my background-image take full height of div?-CodePudding

I have a div with a background image that I am trying to give a transparent type border to.

Currently, this works for the side borders but the top and bottom borders do not fill with the image. How would I achieve this?

.picture-div {
  background: url(https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 25px solid rgba(100, 100, 100, .50);
  width: 200px;
  height: 200px;
  border-radius: 60px;
}

<div  />

CodePudding user response：

Add background-origin to border-box, so the image will fill the border. You can read the detail in : https://www.w3schools.com/cssref/css3_pr_background-origin.asp

.picture-div {
  background: url(https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-origin: border-box;
  border: 25px solid rgba(100, 100, 100, .50);
  width: 200px;
  height: 200px;
  border-radius: 60px;
}

<div  />

CodePudding user response：

You can use border on the pseudo :before of the picture-div class as follows:

.picture-div {
  background: url(https://www.princeton.edu/sites/default/files/styles/half_2x/public/images/2022/02/KOA_Nassau_2697x1517.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 60px;
}

.picture-div:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 25px solid rgba(100, 100, 100, .50);
  border-radius: 60px;
}

<div  />