Pinwand als Hintergrund erstellen

[mick62]

Ich hätte gerne für eine Section eine pinwand als Hintergrund
wie muss ich ein Bild gestalten, dass sich dann nachher allen responsiven Ansichten anpasst.
Wenn ich nur einen Korkhintergrund nehme dürfte es ja kein Problem geben. Aber wenn um den Kork noch einen beliebigen Rahmen möchte, dann habe ich Probleme.
Kann ich dass mit css regeln und wie könnte das dann aussehen?

In diesem Rahmen will ich dann News in flexboxen untereinander anpinnen.

Gibt es eine Möglichkeit

border: eine texture;

das würde mein Problem lösen. Doch wie?

 

[Oliver77]

Vielleicht hilft Dir das weiter:
https://developer.mozilla.org/en-US/docs/Web/CSS/border-image

 

[mick62]

Ich möchte ein Holzrahmen drumrum haben. Doch wie bekomme ich den als texture?
Ich brauch ja Waagerecht und Senkrecht
Mein Code

 <section id="news">
      <div class="border-top"></div>
      <div class="border-bottom"></div>
      <div class="border-left"></div>
      <div class="border-right"></div>
      <h1>Was ist demnächst so Los!</h1>
        
        <!-- mein Inhalt -->
      </section>

#news {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-image: url(../images/kork_bg.png);
  background-size: cover;
  position: relative;
}

#news .border-top,
#news .border-bottom,
#news .border-left,
#news .border-right {
  content: "";
  position: absolute;
  background-repeat: repeat;
}

#news .border-top {
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  background-image: url(../images/rahmen_l.png); /* Rahmen oben */
}

#news .bordr-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 20px;
  background-image: url(../images/rahmen_l.png); /* Rahmen unten */
}

#news .border-left {
  top: 0;
  left: 0;
  bottom: 0;
  width: 10px;
  background-image: url(../images/rahmen_h.png); /* Rahmen links */
}

#news .border-right {
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  background-image: url(../images/rahmen_h.png); /* Rahmen rechts */
}

#news > h1 {
  font-size: 2em;
  text-align: center;
  margin-top: 7rem;
  z-index: 10;
}

Das ist wohl suboptimal zu mal der Rahmen unten garnicht angezeigt wird.

Meine gesamte Misere ist hier unter Aktuelles einzusehen

 

[Oliver77]

Du denkst zu umständlich, mit Border-Image geht's,
Hier ein Beispiel auf CodePen
https://codepen.io/Oliver7777/pen/OPLvXKZ

Allerdings eine Textur und nicht für jede Seite, willst Du lieber 4 Texturen haben?