[CSS] :before & :after

[xsrf]

Ich versuche mittels :before und :after den oberen und unteren Teil des Panels anzeigen zulassen, sodass nur die Mitte sich wiederholt.

Leider funktioniert das nicht, wie auf dem Bild zu erkennen ist.

Design:



Umsetzung ( Fehler ):



Mein Code:

/* large panel */

.lg-panel{
	width:1060px;
	margin:0 auto;
	min-height:150px;
	background: url("../img/panel/lg_panel_middle.png") repeat-y;
}

.lg-panel:before {
	background: url("../img/panel/lg_panel_top.png") no-repeat;
}

.lg-panel:after {
	background: url("../img/panel/lg_panel_bottom.png") no-repeat;
}

[Undaground]

Versuch den Before & After - Elementen entweder eine feste Höhe zu verpassen oder ein:

display: block;

oder beides musst du mal ausprobieren

.lg-panel{
	width:1060px;
	margin:0 auto;
	min-height:150px;
	background: url("../img/panel/lg_panel_middle.png") repeat-y;
}

.lg-panel:before {
        content: "";
	background: url("../img/panel/lg_panel_top.png") no-repeat;
        display: block;
        height: DEINE HÖHE;
}

.lg-panel:after {
        content: "";
	background: url("../img/panel/lg_panel_bottom.png") no-repeat;
        display: block;
        height: DEINE HÖHE;
}

[iKyroja :>]

du musst einen content für after und before angeben

.lg-panel:before {
content: "";
background: url("../img/panel/lg_panel_top.png") no-repeat;
display: block;
// Maße
}

[#Metho]

Du kannst als Content auch dein Bild angeben, was um einiges angenehmer ist. Da es direkt die Breite und Höhe des Bildes übernimmt.

.lg-panel{
	width: 1060px;
	margin: 0 auto;
	min-height: 150px;
	background: url("../img/panel/lg_panel_middle.png") repeat-y;
}

.lg-panel:before, .lg-panel:after {
	position: absolute;
	left: 50%;
}
.lg-panel:before {
	content: url('../img/panel/lg_panel_top.png');
	top: 0;
	transform: translate(-50%, -100%);
}

.lg-panel:after {
	content: url('../img/panel/lg_panel_bottom.png');
	bottom: 0;
	transform: translate(-50%, 100%);
}

Damit ist es perfekt mittig, oben und unten positioniert und du kannst das Bild beliebig austauschen. Zudem solltest du ::after und ::before statt :after/:before nutzen, da diese Pseudo-Elemente sind und keine Pseudo-Statements.