✔ transparentes Bild + Hintergundbild - Problem im IE

Status
Nicht offen für weitere Antworten.
B

Baciman

Mitglied
Hallo alle beisammen.

ich habe da ein kleines Problem mit CSS im IE - wie so immer :-)

Für mein Div habe ich ein Hintergrundbild
Code: 
#content {
width: 468px;
min-height: 300px;
background-color: #FEFAE1;
background-image: url("pic/hotel2.jpg");
background-repeat: no-repeat;
float: right;
margin: 0px 0px 0px 12px;
text-align: left;
}
Im FF alles. Also die minimum Höhe von 300px wird eingehalten. Aber im IE nicht :(
hat dazu einer eine Lösung?
Weil das Hintergundbild ist 250px groß und soll auch bei weniger Text komplett dargestelllt werden.

Über dem Hintergrundbild hab ich meine Überschrift gelegt. Es sollte ein transparentes Bild sein (png-Datei). Im FF wird sie auch transparent über das Hintergrundbild gelegt, aber im IE gibt es Probleme. Dort ist die transparente Fläche mit dunkel-blau unterlegt.
Das Bild für die Überschrift habe ich normal mit
Code: 
<img src="../pic/welcome.png" />
eingebunden

http://www.popel-schmeckt-mir.de/index.php?page=willkommen <<< im FF ok, aber im IE nicht.

Hat da jemand eine Lösung für mich?

ThX & mfg
Baci
 
Ja, der MS InternetExplorer unterstützt keine transparenten PNGs. Du könntest eventuell ein GIF nehmen und mit dem CSS Filter alpha transparenz erzeugen, aber soweit ich weiß funktioniert das auch nicht mit jedem Browser, aber mit FF und IE schon.

Was die min-height angeht. Ergänze zustätzlich für den IE: _height:300px;


Gruß
 
Danke, das mit der Mindesthöhe hat gut geklappt.

Gibt es denn keine andere Möglichkeit für die transparenten Grafik?
Mit einem gif oder jpg?

Weil auf einer anderen Seite hab ich das gesehen. Die haben eine Hintergrundgrafik und dann einen Schriftzug drüber. :confused:
 
Doch, wie gesagt, das geht per CSS:

Code: 
   filter:alpha(opacity=80);
   -moz-opacity:0.8;

>> funktioniert in Moz und IE.


Ich häng auch grad nochmal ein Beispiel mit einem transparenten GIF an.

Ansonsten je nachdem wie du arbeitest, kannst du das ganze auch simulieren, wenn du mit Photoshop ein Layout erstellst, einfach mit transparenzen arbeitest, sliced usw..
Natürlich nicht so die saubere Art und Weise aber wenn du viel wert auf die Gestaltung legst natürlich möglich.


Edit: Wenn du anstatt dem Gif ein PNG nutzt, ist die Transparenz auch mit Opera darstellbar.
Allerdings hast du ja irgendwas von grauen Rändern geschrieben?- das heißt dein Bild ist nicht viereckig und du möchtest etwas 100%ig Transparent darstellen? Wenn ja gib vielleicht mal ein Beispiel dazu oder den Link zu der oben erwähnten Seite.


Gruß
 
Zuletzt bearbeitet:
Hi,

das mit CSS hab ich schon verstanden und bringt nich den gewünschten Effekt, da dann auch mein Schriftzug - der im der Datei ist - schwächer wird.

Du kannst dir das mal hier angucken.
>>> http://www.popel-schmeckt-mir.de/ <<<

öffne die Startseite einmal im FF und dann im IE. Da siehst du schon das Problem :(

// EDIT

Ich habe es hinbekommen :-)

Habe nur den Schlagschatten in Photoshop etwas verändert und schon konnte ich das gif komplett transparent speichern und der FF und IE zeigen es auch so an ;)

Thread kann als abgehakt markiert werden :)
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück