<div class="one">
  <p>Some content.</p>
</div>
<div class="two">
  <p>Some more content.</p>
</div>
<div class="three">
  <p>Some more content and a pseudo element hiding beneath.</p>
</div>

body {
  background: #C4AB80;
  background-image: url(https://www.wintertonshow.co.uk/assets/images/background/hessian.jpg);
  background-size: 175px;
  padding-top: 0.5em;
}

div {
  margin: 1em 4%;
  padding: 1em;
  border-color: transparent;
  border-style: solid;
  border-width: 10px;
  border-image: url(https://www.wintertonshow.co.uk/assets/images/background/paper-border1.png) 20 fill round;
}

.two {
  background-color: #f3f9ff;
  border-color: red;
  background-clip: padding-box; /* This is a winner*/
}

.three {
  position: relative;
}

.three::before {
  display: block;
  position: absolute;
  outline: 1px dotted red;
  content: ' ';
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #f3f9ff;
  z-index: -1;
}