Frage Hintergrundgrafik über Inhalts Div

[benbalthasar]

Ich möchte die Hintergrundgrafik (die blaue) das sie an das Inhalt's Div grenzt. Bisher legt sie sich leider oben genau drauf. Ich hoffe ihr wisst wie ich das meine.

Irgendwie komme ich da leider nicht weiter.

http://chipgewinn.de/index.php

 

[MrMurphy]

Hallo,

eine Hintergrundgrafik kann nicht außerhalb ihres Containers angezeigt werden.

Ich sehe drei Lösungsmöglichkeiten (sofern ich dein Problem richtig verstanden habe):

1. Die Grafik wird oberhalb des Inhalts-Containers im body-Bereich als Vordergrundgrafik eingefügt.

2. Oberhalb des Inhaltscontainers wird ein weiterer Container eingefügt und in den die Grafik als Vorder- oder Hintergrundgrafik eingefügt.

3. Mein Favorit, da für das Layout grundsätzlich keine zusätzlichen Elemente erstellt werden sollen:

a) Mit padding-top erhält der Inhaltscontainer oben Platz für die Grafik

b) Mit linear-gradient ein (transparent-white) wird eine zweigeteilte Hintergrundfarbe eingefügt

c) Die Hintergrundgrafik wird darüber angeordnet, so dass sie optisch oberhalb der weißen Fläche erscheint

Hört sich kompliziert an, ist aber einfach. Du löscht aus #inhalt folgendes

background: white url("images/content_top2.png") no-repeat scroll 0 0 ;

und ersetzt es durch

background-image: linear-gradient(transparent 0px, transparent 25px, white 25px, white 100%), url(images/content_top2.png);
padding-top: 25px;

Dann sollte es funktionieren.

Gruss

MrMurphy

 

[benbalthasar]

Danke dir, die 3. Möglichkeit hat mir sehr geholfen.

Edit: Hab gerade bemerkt das es in Google Chrome leider nicht funzt, da wird das Bild irgendwie "verschleiert" dargestellt.

 

[MrMurphy]

Hallo,

das Problem kann ich nachvollziehen. Tausche mal die Reihenfolge der Grafiken aus und lasse keine Wiederholung zu, also:

background-image: url(images/content_top.png), linear-gradient(transparent 0px, transparent 25px, white 25px, white 100%);
background-repeat: no-repeat, no-repeat;

Gruss

MrMurphy

 

[benbalthasar]

Habe ich gemacht, allerdings wird es in Chrome immer noch falsch dargestellt.

 

[MrMurphy]

Hallo,

das scheint ein Problem vom Chrome zu sein. Eigentlich soll es eine klare Trennlinie zwischen den beiden Hintergrundfarben geben, aber der Chrome bekommt das nicht hin. Je mehr Inhalt der Container hat desto breiter wird der Übergang zwischen der Transparenz und der Farbe.

Da meine Testdatei nur wenig Text enthielt war das so für mich nicht sichtbar.

Ich habe noch versucht die Grafik mittels des Pseudoelements :before einzubinden. Aber bei deinem Quelltext bekomme ich die Grafik dann nicht positioniert.

Gruss

MrMurphy

 

[benbalthasar]

Danke für deine Mühe.
Wäre es demnach besser ich stelle meinen Quelltext um?
In welche Richtung sollte ich deiner Meinung nach gehen? Irgendwelche Hinweise`?

Mfg

 

[djheke]

Wenn's noch aktuell ist, vielleicht so.

#inhalt {
 clear: both;
 padding: 25px;
 background-color:#fff;
 position:relative;
 top:25px;
 }
#inhalt:before {
 content:url(images/content_top.png);
 position:absolute;
 top:-25px;
 left:0px;
}

 

[MrMurphy]

Hallo,

jetzt habe ich herausgefunden, warum meine Lösung nicht funktionierte.

Im HTML-Quelltext ist der div#header nicht geschlossen. Füge bitte zwischen

</div>

<!--<div id="countdown">

ein zusätzliches schließendes div ein.

</div>

Dann sollte auch meine angedachte Lösung funktionieren:

#inhalt {
background-color: white;
clear: both;
margin-top: 26px;
}

#inhalt:before {
content: url("images/content_top.png");
margin-top: -26px;
position: absolute
}

Ob die Ausrichtung noch korrigiert werden muss kann ich dann erst im fertigen Quelltext sehen.

Wäre es demnach besser ich stelle meinen Quelltext um?

Grundsätzlich ist der in Ordnung. Mit den neuen HTML5-Containern wäre der fehlende schließende Tag, der mich so geärgert hat, wahrscheinlich überhaupt nicht passiert oder ich hätte ihn schneller gefunden.

Gruss

MrMurphy

 

[benbalthasar]

Perfekt, jetzt läuft es richtig auch im Chrome, vielen Dank.

Edit: Hab grad gesehen das es nun im Firefox falsch anzeigt wird. Langsam werde ich n bissle doff bei dem ganze. Aber vlt. weist du ja noch einen Rat.

Edit2: Habe es jetzt hinbekommen, habe den Code von djheke genommen und ein wenig verändert. Nun wird es in beiden Browser richtig angezeigt.

#inhalt {
 clear: both;
 position:relative;
 top:25px;
 }
#inhalt:before {
 content:url(images/content_top.png);
 position:absolute;
 top:-25px;
 left:0px;
}