Es ist was da....und doch nicht

**eindruck** · 29.01.2016, 20:55

Guten Abend,

ich probier mich mal wieder mit css...aber irgendwie scheint es nicht zu klappen.

Ich möchte oben links und rechts des grauen Headerbildes eine Grafik haben (im Moment nur Orange...später Schatten),
irgendwie ist das div auch an der richtigen Stelle...aber keine Grafik.

Wäre toll wenn sich da mal jemand ansehen möchte.

Hier die Seite: http://www.neu.ein-druck.net/mini-display-cleaner.html

Und hier das passende CSS:

Code:

#header_after .inside:before, #header_after .inside:after { position: absolute; height: 100%; width: 73px; top: 0; content: ""; z-index: -1; display: block; }
#header_after .inside:before {left: -73px; background: transparent url(../img/test.png) no-repeat;}
#header_after .inside:after {right: -73px; background: transparent url(../img/test.png) no-repeat;}

Vielen Dank im voraus

Gruß

Stefan

**doggidog13** · 29.01.2016, 21:12

Also was mich wundert ist:

HTML-Code:

<div id="top">
<header id="header">
<div id="header_after">
<div id="wrapper">
<div id="services">
<footer id="footer">
<div id="bottom">
<div id="off_canvas">
<div id="stickyheader" class="animate">

das ist ganz schön viel, hast du das selber gemacht?

**eindruck** · 29.01.2016, 21:25

Nein, das ist ein gekauftes Template und ich versuche zu pimpen.

Aber das Du nichts oranges siehst ist genau das Problem, es wird nicht angezeigt obwohl
das DIV neben dem Headerbild da ist:

Unbenannt.JPG

Unbenannt2.JPG

Gruß

Stefan

**doggidog13** · 29.01.2016, 21:38

Code:

#header_after .inside:before, #header_after .inside:after { position: absolute; height: 100%; width: 73px; top: 0; content: "url(../img/test.png)"; z-index: 1; display: block; }
#header_after .inside:before {left: -73px;}
#header_after .inside:after {right: -73px;}

#header_after .inside {overflow:visible !important;}

**eindruck** · 29.01.2016, 21:46

Hi,

perfekt funktioniert, was war genau mein Fehler?

Gruß

Stefan

**tab** · 29.01.2016, 21:46

Ja, was doggidog da korrigiert hat ist dein Problem, dass #header_after .inside die Eigenschaft overflow:hidden zugewiesen bekommt. Deshalb wird das ::before nicht angezeigt, weil es außerhalb des Bereichs liegt.