vollflächige Hintergrundbilder in Artikeln

[riF]

Hallo,

ich verzweifle gerade am Aufbau einer Webseite (www.gehse-jena.de/test). Habe das Forum vergeblich nach Antworten durchsucht, deshalb bitte ich Euch nun direkt um Hilfe.

Möchte gern mehrere Artikel untereinander mit einem jeweils anderen vollflächigen Hintergrund versehen. Der Inhalt (also bspw. Text und eine Linie mit der der Artikel abschließt) soll aber nicht vollflächig, sondern dem Header angepasst max-width:960px und zentriert sein. Habe da schon alles mögliche ausprobiert, aber leider bleiben Hintergrund und Inhalt des Artikels immer gleich breit. Kann ich den Hintergrund irgendwie seperat ansprechen?

Außerdem wäre es schön, wenn es irgendwie möglich wäre, den Hintergrund des ersten Artikels der Seite hinter den Header zu setzen. Das gleiche gilt dann auch für den Footer. Habe mir bei dem Header provisorisch mit einem Hintergrundbild im body (background-size:100%) ausgeholfen.

Kennt jemand dazu eine ordentliche Lösung?

Lieben Gruß

[riF]

Gibt es dafür überhaupt eine Lösung oder muss man da ganz anders rangehen?

[dirksche]

Hmm... vielleicht mit background-size: 960px auto; und background-position: center; ?

[riF]

aber wo geb ich das denn ein? wenn ich das bspw. auf mod_article oder ce_text anwende passiert entweder nicht wirklich was oder der komplette artikel wird angesprochen.

[tab]

Ok, wie soll es denn genau aussehen, ich hab es noch nicht 100% begriffen. Sollen die Artikelhintergründe jeweils das komplette Hintergrundbild anzeigen, ohne dass das Bild verzerrt wird? Das hiesse dann, die Höhe des Hintergrundbild und damit eben auch des Artikels hängt in jedem Fall von der Viewportbreite ab?!? Oder ist nur interessant, dass das Hintergrundbild die komplette Breite hat und es muss nicht das komplette Bild angezeigt werden, wenn der Inhalt des Artikels eben eine geringe Höhe hat? Was soll passieren, wenn die Höhe des Hintergrundbilds nicht reicht bei einem langen Artikel mit viel Inhalt und / oder einer geringen Breite des Viewports?

Prinzipiell könnte man so vorgehen: Wrapper/container/main/.inside alle ohne feste Breite. Ebenso die Artikel, Nur die Inhaltselemente werden alle auf feste Breite gesetzt und zentriert. Dann kann der Artikel das Hintergrundbild bekommen.

[riF]

Hallo und danke für die Antworten!

Ok, wie soll es denn genau aussehen, ich hab es noch nicht 100% begriffen. Sollen die Artikelhintergründe jeweils das komplette Hintergrundbild anzeigen, ohne dass das Bild verzerrt wird? Das hiesse dann, die Höhe des Hintergrundbild und damit eben auch des Artikels hängt in jedem Fall von der Viewportbreite ab?!? Oder ist nur interessant, dass das Hintergrundbild die komplette Breite hat und es muss nicht das komplette Bild angezeigt werden, wenn der Inhalt des Artikels eben eine geringe Höhe hat? Was soll passieren, wenn die Höhe des Hintergrundbilds nicht reicht bei einem langen Artikel mit viel Inhalt und / oder einer geringen Breite des Viewports?

Das Hintergrundbild soll auf jeden Fall vollflächig und nicht verzerrt sein, muss aber nicht komplett angezeigt werden (das würde ja mit 100% nicht funktionieren, wenn der Artikel länger ist).

Prinzipiell könnte man so vorgehen: Wrapper/container/main/.inside alle ohne feste Breite. Ebenso die Artikel, Nur die Inhaltselemente werden alle auf feste Breite gesetzt und zentriert. Dann kann der Artikel das Hintergrundbild bekommen.

Genau sowas suche ich die ganze Zeit, aber es will nicht funktionieren. Irgendwas mache ich da falsch. Wie spreche ich denn die Inhaltselemente an?

Hab hier mal ein Bild, wie es eigentlich aussehen soll …
gehse-bsp.jpg

[dirksche]

So wie ich das sehe, hast Du den Inhaltselementen das Hintergrundbild gegeben. Ich würde dem Artikel das Bild zuweisen und dann die Inhalteslemente (also ce_text) per CSS positionieren. Also 5 Artikel anlegen mit jeweils einem Hintergrundbild und dann je Artikel das Text Inhaltselement. Ist doch recht simpel ;-)

[tab]

Genau sowas suche ich die ganze Zeit, aber es will nicht funktionieren. Irgendwas mache ich da falsch. Wie spreche ich denn die Inhaltselemente an?

Das mit den Inhaltselementen sollte so funktionieren:

.mod_article *[class*="ce_"],.mod_article *[class*="mod_"] {
        width: 960px;
        margin-left:auto;
        margin-right:auto;
}

Alternativ könntest du natürlich auch über das Template noch ein umschliessendes div in den Artikel einbauen und dem dann die fixe Breite zuweisen und es zentrieren.

[riF]

Vielen lieben Dank. Hab es nun endlich geschafft =)
War ja echt nur ein dummer Denkfehler.