Seiten Background-Color wiederholt sich im <iframe>

[KC]

Hi Leute,

als Hintergrundfarbe einer Seite habe ich per CSS einen Farbverlauf erstellt:

body
{
background: -moz-radial-gradient(center, ellipse cover, #fbebc5 0%, #ffffff 100%);
background: -webkit-radial-gradient(center, ellipse cover, #fbebc5 0%,#ffffff 100%);
background: radial-gradient(ellipse at center, #fbebc5 0%,#ffffff 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbebc5', endColorstr='#ffffff',GradientType=1 );
}

Weiter unten auf der Seite habe ich per <iframe> ein Kontaktformular eingebettet und der Farbverlauf wird im <iframe> nocheinmal wiederholt. Dabei möchte ich, daß das <iframe> gar keine Hintergrundfarbe bekommt, also transparent bleibt.

Habe schon diverses versucht, alles ohne Erfolg:

<iframe src="mailer.php" width="100%" height="400" frameborder="0" scrolling="no" allowtransparency="true" style="background-color:transparent;"></iframe>

Selbst wenn ich dem <iframe> eine Hintergrundfarbe gebe, style="background-color:red;", dann reagiert das <iframe> auch nicht. Es ist immer dieser Hintergrundfarbverlauf zu sehen.

Hier ein Screenshot.

Habe ich hier irgendwo einen Denkfehler?

MfG KC

[Gunnar Bittersmann]

@@KC

body
{
background: -moz-radial-gradient(center, ellipse cover, #fbebc5 0%, #ffffff 100%);
background: -webkit-radial-gradient(center, ellipse cover, #fbebc5 0%,#ffffff 100%);
background: radial-gradient(ellipse at center, #fbebc5 0%,#ffffff 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbebc5', endColorstr='#ffffff',GradientType=1 );
}

Bitte Code als solchen formatieren (Button über dem Eingabefeld). Ich hab das mal für dich nachgeholt.

Die Vendor-Präfixe sind obsolet. Weg damit! MS-Filter ebenfalls.

<iframe src="mailer.php" width="100%" height="400" frameborder="0" scrolling="no" allowtransparency="true" style="background-color:transparent;"></iframe>

Selbst wenn ich dem <iframe> eine Hintergrundfarbe gebe, style="background-color:red;", dann reagiert das <iframe> auch nicht. Es ist immer dieser Hintergrundfarbverlauf zu sehen.

Lass mich raten: Das Dokument mailer.php bindet ebenfalls ein Stylesheet ein, wo für html oder body ein Hintergrund gesetzt ist? Das sollte dann nicht verwundern, dass dieser dann auch zu sehen ist.

LLAP 🖖

[KC]

Die mailer.php musste ich notgedrungen das gleiche CSS geben, allerdings umbenannt auf style2.css und die Hintergrundfarbe in der style2.css entfernt. Aber ich komme trotzdem nicht weiter.

Also die Index.html hat style.css mit:

body {
padding: 0;
margin: 0;
background: #fbebc5;
font-family: 'open Sans', sans-serif;
background: #fbebc5;
background: -moz-radial-gradient(center, ellipse cover, #fbebc5 0%, #ffffff 100%);
background: -webkit-radial-gradient(center, ellipse cover, #fbebc5 0%,#ffffff 100%);
background: radial-gradient(ellipse at center, #fbebc5 0%,#ffffff 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbebc5', endColorstr='#ffffff',GradientType=1 );
}

Die mailer.php hat style2.css mit:

body {
padding: 0;
margin: 0;
font-family: 'open Sans', sans-serif;
}

Dazu sieht mein iframe nun so aus:

<iframe src="mailer.php" width="100%" height="400" frameborder="0" scrolling="no" allowtransparency="true" style="background-color:transparent;"></iframe>

Die Seite sieht aber nach wie vor so aus wie auf dem Screenshot!

[Linuchs]

body {
background: #fbebc5;
}

<iframe src="mailer.php" width="100%" height="400" frameborder="0" scrolling="no" allowtransparency="true" style="background-color:transparent;"></iframe>

Die Seite sieht aber nach wie vor so aus wie auf dem Screenshot!

Ja, könnte body den Farbverlauf an iframe vererben? So ein Farbverlauf ist ja so etwas wie ein Hintergrundbild. Darüber (oder darunter?) legst du background-color:transparent und das Bild ist immer noch zu sehen.

Ich würde testweise mal die Zeichen -color löschen.

Linuchs

[KC]

Ich habe es hinbekommen mit der Gedächtnisstutze von Gunnar. Habe ein neues Stylesheet angehängt mit dem body tag background-color: transparent.

Jetzt gehts! Danke für die Unterstützung

[Gunnar Bittersmann]

@@KC

Bitte Code als solchen formatieren (Button über dem Eingabefeld).

Also die Index.html hat style.css mit:

body { padding: 0; margin: 0; background: #fbebc5; font-family: 'open Sans', sans-serif; background: #fbebc5; background: -moz-radial-gradient(center, ellipse cover, #fbebc5 0%, #ffffff 100%); background: -webkit-radial-gradient(center, ellipse cover, #fbebc5 0%,#ffffff 100%); background: radial-gradient(ellipse at center, #fbebc5 0%,#ffffff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbebc5', endColorstr='#ffffff',GradientType=1 ); }

Sind und so schwer voneinander zu unterscheiden?

Ich hab das mal für dich nachgeholt.

Jetzt aber letzmalig!

Dazu sieht mein iframe nun so aus:

<iframe src="mailer.php" width="100%" height="400" frameborder="0" scrolling="no" allowtransparency="true" style="background-color:transparent;"></iframe>

Es gibt im HTML-Standard weder frameborder- (das wäre mit CSS anzugeben) noch scrolling- noch allowtransparency-Attribute. Letzteres brauchst du auch nicht; Browser verhalten sich so, dass durchs Framset der Seitenhintergund durchscheint, wenn das Dokument im Framset keinen eigenen Hintergrund hat.

Die Seite sieht aber nach wie vor so aus wie auf dem Screenshot!

Bei dir hat das Dokument im Framset wohl immer noch einen eigenen Hintergrund.

LLAP 🖖

[Julius]

Hallo KC,

E-Mail schreibt man „E-Mail“r und nicht „Email“, genauso wie „U-Bahn“ und „T-Shirt“.

Gruß
Julius