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?

 

[mick62]

Da stimmt insgesamt was nicht.
Ich habe jetzt mal um die Section einen Roten rahmen erstellt und bin jetzt soweit das dieser oben, links und rechts angezeigt aber unten im Footer verschwindet. ich finde da keine Lösung.
Vielleicht findet ja hier jemand den Fehler im css oder html?
das ist die Problemseite unter Aktuelles zu finden

 

[msi]

Ich sehe an allen vier Seiten einen roten Rahmen.

 

[mick62]

Ok! Alle 4 Seiten habe einen Rahm. Aber die untere Seite ist nicht im Bild zu sehen

 

[msi]

Das hängt aber von der Bildschirmauflösung ab. Wenn ich einen großen Monitor mir hoher Auflösung habe sehe ich den Rahmen ohne Scrollen, bei kleinerem Bildschirm mit geringerer Auflösung muss man scrollen.

 

[mick62]

Eigentlich ist es ja responives Design. Aber vielleicht hat ja sonst wer eine Idee. Bis dahin werde ich mal das Internet durch lesen.

 

[msi]

#news {
  margin: 0;
  padding-bottom: 20rem;
  min-height: calc(100vh - 40px);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-image: url(../images/kork_bg.png);
  background-size: cover;
  border: 20px solid red;
  box-sizing: border-box;
  overflow: hidden;
}

Erhöhe mal bei min-height den Pixel-Wert auf

min-height: calc(100vh - 60px);