Bild per CSS und weißer Rahmen

[scaramangado]

Hallo,
ich habe gerade auf meiner Webseite ein Bild per CSS eingebunden, um eine bessere Barrierefreiheit zu erreichen. Nun wird aber aus unerklärlichen Gründen ein weißer Rahmen um das Bild herum gelegt... (Hat nichts mit dem Bild zu tun, wenn ich Bilder nicht lade, kommt er trotzdem). Woran kann das liegen?

<div id="subheader_new"> <img class="logo"> </div>

#subheader_new {
margin: 25px 25px 35px 25px;
float: left;
outline: 0px ;
border: 0px;
outline-style: none;
border-style: none;
}

img.logo {
background-image: url(images/subheader_new.png);
width: 880px;
height: 290px;
outline: 0px ;
border: 0px;
outline-style: none;
border-style: none;
}

Danke im Voraus.

 

[_Thor_]

An dem CSS liegt es nicht, das Hintergrundbild vielleicht? Sonst brauchen wir den Link zu deiner Seite, um den Fehler zu finden.

 

[scaramangado]

Dürfte es eigentlich auch nicht sein.

Link

 

[prm]

Ich kann's mir auch nicht erklären.
Aber binde das Bild doch direkt ein, dann klappt es:

<div id="subheader_new"> <img src="http://inventivesoft.de/test/images/subheader_new.png" alt="" width="" height="" border="0"> </div>

Den Pfad kannst du noch in einen relativen abändern.

 

[scaramangado]

Ich möchte das aber nicht per HTML einbinden, damit es nicht angezeigt wird, wenn ein Browser kein CSS unterstützt...

 

[Lenchen]

<img class="logo">
Darf man das so schreiben? Wozu nutzt man diese schreibweise? hab ich noch nie gesehen.

 

[Junny]

Nein, das darf man nicht so schreiben. Ein img-Tag muss eine Quelle haben und wird ohne CSS angezeigt.
Du könntest das Hintergrundbild direkt dem div zuweisen. Der Rahmen dürfte weggehen, wenn Du dann noch die Hintergrundfarbe auf schwarz setzt.

Eigentlich gibt es eine Regel, wann man ein Bild direkt einbindet und wann als Hintergrundbild:

• Bilder, die zum Inhalt gehören: Direkt einbinden mit entsprechendem alt-Text
• Bilder, die ausschließlich zur Dekoration dienen: Als Hintergrundbild einbinden

Gruß
Junny

 

[prm]

Dein Code macht keinen Sinn.

Es gibt drei Möglichkeiten:

1. img direkt einbinden, wenn es nicht erforderlich ist, dass es im Hintergrund steht. Macht Sinn und ist am einfachsten.

2. Weise die Grafik dem subheader_new direkt zu:

#subheader_new {
margin: 25px 25px 35px 25px;
float: left;
background: url(images/subheader_new.png);
width: 880px;
height:290px;
}

<div id="subheader_new"></div>

3. In Anlehnung an deinen Code (="Div-Suppe" und deshalb nicht empfehlenswert):

.logo {
background-image: url(images/subheader_new.png);
width: 880px;
height: 290px;
}

<div id="subheader_new"> <div class="logo"></div> </div>

@ Lenchen:

<img class="logo" alt="">

Das geht so wirklich nicht. Der img-Tag braucht einen src. Man kann einem img zwar durchaus eine Klasse zuweisen (in der dann z.B. Rahmen o.ä, definiert sind), aber dann muss man den Tag auch richtig schreiben:

<img class="logo" src="bild.jpg" alt="" width="800" height="290" border="0">

 

[Lenchen]

Gut, ich dachte schon, mir ist was wichtiges entgangen.