3 Hintergrundgrafiken für einen Artikel möglich?

[Bernhardt_Schmiet]

Hallo allerseits,

ich arbeite mich gerade in Contao ein, studiere grad das Buch von P.Müller. Was CMS betrifft bin ich Neuling, würde mich selber als ambitionierer Hobbyanwender beschreiben, mit mittleren Erfahrungen mit statischen Webseiten.
Bin jetzt über etwas gestolpert, wo ich mit dem CMS irgendwie nicht weiterkomme, denke aber ist ne relativ einfache Frage für euch, bitte nicht schimpfen wenn ich irgenwas übersehen habe...

Der folgede HTML-Code wird von Contao erzeugt (verkürzt zur besseren Übersicht).

<div id="main">

  <div class="inside">
            
    <div class="mod_article block">
              
        <div class="ce_text block">
              <h2>Eine Überschrift</h2>
              <p>Text</p>
              <p>Text</p>
              <p>Text</p>
              <img.....>
        </div>

    </div>


    <div class="mod_article block">
      
        <h1 class="ce_headline">überschrift</h1>
        
        <div class="ce_image block">
        <figure class="image_container">
          <img.....>
        </figure>
        </div>
      
    </div>  
  
  </div>  
  
  <div id="clear">
  </div>

</div>

Ein Artikel beinhaltet Inhaltselemente, wie z.B. Text (ce_text), Überschriften oder Bilder.
Was ich jetzt erreichen möchte ist, das ich einem Artikel 3 Grafiken zuweisen kann, eine für den oberen Bereich, eine sich wiederholende für den mittleren Bereich (je nach länge des Artikels) und eine für den Abschluss (ganz unten).
Damit ich das mit CSS realisieren kann müsste ich 3 Elementen jeweils eins der drei Hintergrundbilder zuweisen.
Jedoch weiß ich nicht, welchen in das zuweisen könnte...
Der Klasse "mod_article" könnte ich z.b. das mittlere Hintergrundbild zuweisen. Aber welchen Elementen könnte ich die restlichen Grafiken zuweisen?

Allen schon mal vielen Dank für die Hilfe, hoffe ich blamiere mich jetzt nicht...
PS: falls der Hinweis kommt CSS3 zu verwenden... das will ich ohne CSS3 versuchen.

Bernhardt

[derRenner]

Hello,
das kannst du mit dem background-tag im CSS lösen.

zum Beispiel

.mod_article {background: url(bg_top.jpg) no-repeat top, url(bg_bottom.jpg) no-repeat bottom, url(bg_middle.jpg) repeat-y center;} 

[joe]

@derRenner Auch das verwenden von mehreren Hintergrundbildern ist erst mit CSS3 möglich siehe http://www.css3.info/preview/multiple-backgrounds/

@Bernhardt_Schmiet Du wirst wohl nicht drum rum kommen das template mit ein paar extra divs modifizieren zu müssen.

[Bernhardt_Schmiet]

Vielen Dank für Deine Antwort, ich wusste gar nicht, das ich mehrer Grafiken im background-tag ansprechen kann.
Hab's gleich versucht, funktioniert eigentlich ganz gut. Nur überschneiden sich die Grafiken, an den Ecken, siehe Bild.

Ecken ueberschneiden sich.jpg

Kann man das korrigieren?

@joe, auch Dir vielen Dank.
Also erst mit CSS3... darum war mir das neu, in CSS3 hab ich mich noch gar nicht eingearbeitet.

Template anpassen ist dann wohl doch (noch) ne Stufe zu hoch für mich.
Wenn's nur mit CSS3 klappt, hab ich natürlich ein Problem mit alten Browsern... und mit CSS3 überschneiden sich die Grafiken, damit würde es auch nicht klappen.
Also kann man's eigentlich vergessen. Schlecht!

Wenn noch jemand ne Idee hat, bitte her damit.

[Luminanz]

Hallo
Ich vermute, dass die Grafiken noch eine transparenten Bereich haben. Wenn du dort die gewünschte Hintergrundfarbe verwendest, sollte es eigentlich sauber aussehen.
Gruss, Luminanz

[jubel]

Nur überschneiden sich die Grafiken, an den Ecken, siehe Bild.

Ecken ueberschneiden sich.jpg

Anmerkung:
Wenn dein Ziel ist eine Box mit runden Ecken wie in obigem Bild angedeutet, dann brauchst du dafür eigentlich überhaupt keine Grafik. Oder ist das nur ein grundsätzliches Beispiel?

[magicsepp]

Bernhardt,

auch wenn CSS3-Styles noch nicht so dein Thema sind, so wäre jetzt ein guter Moment damit anzufangen.
Runde Ecken sind da viel einfacher und das schöne daran contao hilft dir da. Das css sieht so aus für die wichtigsten Browser

-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;

im Css Editor muss das nur einml eingetragen werden.
Und weil der buggy IE kleiner 9 das noch nicht kann baut contao gleich noch folgende Hilfe ein damit das da auch funktioniert.

behavior: url(/PIE.htc);

Somit bietet Dir Contao alles für runde Ecken mit css3 auf allen gängigen Browser - Ist das nicht einfach?

Viele Grüße

[Bernhardt_Schmiet]

Hallo und vielen Dank für eure Mithilfe!!!
Super Forum :-)

Luminanz

Hallo
Ich vermute, dass die Grafiken noch eine transparenten Bereich haben. Wenn du dort die gewünschte Hintergrundfarbe verwendest, sollte es eigentlich sauber aussehen.
Gruss, Luminanz

Das ist richtig. Die Grafiken sind transparent, ich werde es mal ohne Transparenz versuchen.
Wobei ich ja dann bei CSS3 bin, und ich es dann sparen könnte mit den Grafiken zu arbeiten.

jubel

Anmerkung:
Wenn dein Ziel ist eine Box mit runden Ecken wie in obigem Bild angedeutet, dann brauchst du dafür eigentlich überhaupt keine Grafik. Oder ist das nur ein grundsätzliches Beispiel?

Simmt, genau das wollte ich: die Box "Artikel" soll runde Ecken bekommen (anschließend noch evtl. mit Schlagschatten). Wenn ich dafür keine Grafiken benötige, wie geht es dann, abgesehen von der Möglichkeit mit CSS3?

magicsepp

Und weil der buggy IE kleiner 9 das noch nicht kann baut contao gleich noch folgende Hilfe ein damit das da auch funktioniert.
HTML-Code:

behavior: url(/PIE.htc);

Somit bietet Dir Contao alles für runde Ecken mit css3 auf allen gängigen Browser - Ist das nicht einfach?

Viele Grüße

Auch das werde ich mal testen. Ja, klingt einfach, genial einfach!
Aber wie funktioniert das dann in den IE's<9? Werden die dann eckig oder auch rund?!
Bin mal gespannt und werde es am Wochenende checken.
Hoffe ich darf mich dann wieder melden...

Danke nochmals an das Contao-Forum
Bernhardt

[magicsepp]

Ja, klingt einfach, genial einfach!
Aber wie funktioniert das dann in den IE's<9? Werden die dann eckig oder auch rund?!

Die eingebunde url(/PIE.htc); sorgt für runde Ecken und auch Schatten im IE7 und IE8. DEMO hier

[jubel]

Simmt, genau das wollte ich: die Box "Artikel" soll runde Ecken bekommen (anschließend noch evtl. mit Schlagschatten). Wenn ich dafür keine Grafiken benötige, wie geht es dann, abgesehen von der Möglichkeit mit CSS3?

Ich meinte genau die von magipsepp beschriebene Methode, die CSS3 nutzt. Darin sehe ich aber kein grundsätzliches Problem.

Die eingebunde url(/PIE.htc); sorgt für runde Ecken und auch Schatten im IE7 und IE8.

Ich möchte das etwas einschränken, damit es keine Überraschungen gibt.
PIE.htc ist eine feine Sache und auch, dass Contao das ohne Mehraufwand zur Verfügung stellt (wobei ich das gerne auch abschalten können möchte), funktioinert aber nach meinen Erfahrungen nicht immer zuverlässig (mehr dazu kannst du auch beim Autor nachlesen).
Manchmal genügt ein zusätzliches position: relative, aber nicht immer. Es gibt da wohl diverse Wechselwirkungen, wie ich es verstanden habe, auch mit Scripten.

Ich finde das nicht weiter tragisch, da es hierbei ja nur um Schönheit geht, also runde Ecken, Schatten und Verläufe. Man muss sich nur dessen bewusst sein, dass in IE 7/8/9 nicht alles so aussieht wie in einem aktuellen Browser, und dann entscheiden.