Hintergrundbild für einen konkreten Artikel
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
Liste der Anhänge anzeigen (Anzahl: 3)
Zitat:
Zitat von
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
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.
Liste der Anhänge anzeigen (Anzahl: 1)
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:
Anhang 26445
Liste der Anhänge anzeigen (Anzahl: 2)
Zitat:
Zitat von
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 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? :D
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.
Liste der Anhänge anzeigen (Anzahl: 2)
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
Anhang 26448
Anhang 26449
