Hintergrundbild in Box einbetten

Deutsches Forum
1

Hallo an Alle,

wie kann ich in einer einzelnen Box ein Hintergrundbild einbetten und zwar so, das es nur schwach zu erkennen ist bzw. sich nicht so sehr von der Boxenfarbe (grau) abhebt !
Vor 2-3 Jahren hatte ich noch eine Datei auf dem PC, wo dieser Befehl/Quellcode hinterlegt war ! Leider finde ich diese nicht mehr !
Der Befehl/Quellcode wurde damals immer in dem Quellcode-Bereich eingefügt :slight_smile: wie ich mich erinnern kann ! Vielen Dank für eure Hilfe

2

A# HTML:


<div class="myBox"></div>

A# CSS:


.myBox {
  width: 150px;
  height: 150px;
  background:transparent url('../img/dasbild.png') no-repeat top center;  
  filter:     alpha(opacity = 50);    /* IE 6, 7, 8 */
  -ms-filter: "alpha(opacity = 50)";  /* ab IE 8 zusätzlich möglich */
  opacity:    .50; /* alle anderen Browser einschließlich IE 9 */
}

B# HTML ? TPL:


<div class="myBox"><img src="[{$oViewConf->getImageUrl('dasbild.png')}]" alt="tolles Bild" title="super Bild"></div>

B# CSS:


.myBox img {
filter:     alpha(opacity = 50);    /* IE 6, 7, 8 */
-ms-filter: "alpha(opacity = 50)";  /* ab IE 8 zusätzlich möglich */
opacity:    .50; /* alle anderen Browser einschließlich IE 9 */
}

Grüße
Rafig

3

Vielen lieben Dank, ich werde es mal ausprobieren :wink: