Hintergrundbild für einen konkreten Artikel

[PKoch91]

Moin,
ich möchte gern für einen konkreten Artikel eine Hintergrund Bild das sich über die komplette Seite erstreckte einfügen.
Hierfür habe ich auf der Seite einen Artikel erstellt und diesen mit Inhaltselementen befüllt, dem Artikel eine ID zugewiesen über die ich den Artikel anspreche, aber das Bild erstreckte sich nicht über die komplette Seite sondern wird iwo mittig eingefügt. Ich habe alle möglichen css Befehle probiert (cover, etc), aber da ist nix zu machen.
Wenn ich das klassisch schreibe, also zB so:

HTML:
<section id="service_section">
<h2>Dienstleistungen</h2>
<div class="flex-container">
<div class="card">

<a class="headline" href="">Laserschneiden</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt harum consequuntur omnis dolor cum asperiores sint reiciendis magni adipisci incidunt.</p>
<a href="">mehr erfahren</a>
</div>

<div class="card">
<a class="headline" href="">Stahlbau</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt harum consequuntur omnis dolor cum asperiores sint reiciendis magni adipisci incidunt.</p>
<a href="">mehr erfahren</a>
</div>

<div class="card">
<a class="headline" href="">Zerspanungsarbeiten</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt harum consequuntur omnis dolor cum asperiores sint reiciendis magni adipisci incidunt.</p>
<a href="">mehr erfahren</a>
</div>

<div class="card">
<a class="headline" href="">Maschinenbau</a>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sunt harum consequuntur omnis dolor cum asperiores sint reiciendis magni adipisci incidunt.</p>
<a href="">mehr erfahren</a>
</div>
</div>
</section>

CSS:
#service_section{
padding:70px 0;
background-image: url('assets/Screenshot\ 2023-05-01\ 212306.jpg');

background-repeat: repeat;
background-position: center;
background-attachment: fixed;

Dann erstreckt sich das Bild über die gesamte Breite der Sektion und füllt es quasi aus. Klassisch über Visual Studio Code funktioniert es also.
Woran scheiterts hier bei Contao?
Ich habe das Forum bereits durchsucht, aber keine konkrete Lösung gefunden.
Die Seite mit der Textur:
https://set-web.de/startseite

[dazzle89]

Verstehe ich es richtig, dass diese Textur über die gesamte Breite gehen soll?

Die Grafik enthält sehr viel Freiraum, ich würde die gesamte freie Fläche aus der Grafik entfernen sodass sie nur noch aus der Textur besteht. Danach kann man weitersehen

[PKoch91]

Verstehe ich es richtig, dass diese Textur über die gesamte Breite gehen soll?

Die Grafik enthält sehr viel Freiraum, ich würde die gesamte freie Fläche aus der Grafik entfernen sodass sie nur noch aus der Textur besteht. Danach kann man weitersehen

Bei Stahlbau und co ist doch dieses Metallgitter und das ist das Bild/Texture und diese soll über den kompletten Artikel gehen. Der obere Teil (quasi Navi mit Logo, Header-Image etc) ist ein Modul. Der Artikel beginnt quasi dort, wo man den grauen Hintergrund sehen kann.

[dazzle89]

Genau das tut die Grafik auch, aber guck sie dir mal in Photoshop o.ä. an, der ganze Freiraum muss raus. Da sich die Textur überall wiederholt kann die Grafik sowieso deutlich verkleinert werden, sodass sie nur noch den sich wiederholenden Bereich enthält. Diesen "repeated" man dann per CSS vertikal und horizontal

[dazzle89]

Ich weiß nicht, warum es in deinem Programm anders dargestellt wird, aber aus meiner Sicht wäre es die richtige Vorgehensweise die Grafik in etwa folgendermaßen zu verwenden:

textur.png

[PKoch91]

Genau das tut die Grafik auch, aber guck sie dir mal in Photoshop o.ä. an, der ganze Freiraum muss raus. Da sich die Textur überall wiederholt kann die Grafik sowieso deutlich verkleinert werden, sodass sie nur noch ca. 25x25 Pixel groß ist und nur den sich wiederholenden Bereich enthält. Diesen "repeated" man dann per CSS vertikal und horizontal

Sehen wir beide das selbe Bild?
Ich habe zuvor einen Screenshot geschickt, wie es bei Visual Studio Code mit dem selben Bild/Grafik/Texture aussieht. Bei Contao streckt sich das Bild aber net über den gesamten Artikel sonst bleibt in der Mitte. Ich lade jetzt hoch wie es aussehen soll und wie es aussieht.

[dazzle89]

Ich meine nicht das Ergebnis im Browser, sondern die Hintergrunddatei an sich.

Ich füge mal deine ein und im Vergleich dazu noch mal eine die ich erstellt habe, ohne freie Fläche. So würde ich diese Grafik an deiner Stelle verwenden

Hintergrundtextur.png

textur-neu.jpg

[PKoch91]

Ich meine nicht das Ergebnis im Browser, sondern die Hintergrunddatei an sich.

Ich füge mal deine ein und im Vergleich dazu noch mal eine die ich erstellt habe, ohne freie Fläche. So würde ich diese Grafik an deiner Stelle verwenden

Hintergrundtextur.png

textur-neu.jpg

Ich probiere es aus. Danke dir ;D

[PKoch91]

Es hat funktioniert und lag tatsächlich daran, dat ich die PS Datei mit "transparenten" Hintergrund exportiert habe. Unglaublich Vielen Dank!