• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Mehrere Hintergrundbilder + Farbverlauf

T

Tobi44

Mitglied
Hallo,

habe mir hier dieses anhand von versch. Anleitungen/Beispielen zusammengebaut, laut dieser sollte es regelkonform sein. Allerdings fruchtet es in keinem Browser.

Was mache ich falsch? Wie zu erkennen, benötige ich mehrere background-Bilder sowie einen Farbverlauf in einem div/Bereich.

Danke.

Code: 
#gehtnicht {
float:left;
width:260px;
height:530px;
margin:-5px 30px 20px -5px;

background:rgba(0,0,0,.1);
background:url(/home/img/logo/start_1.png) center 190px no-repeat, url(/home/img/logo/start_2.png) center -8px no-repeat,
    -moz-linear-gradient(top, rgba(21,126,188,0) 0%, rgba(125,185,232,1) 100%),
    -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(21,126,188,0)), color-stop(100%,rgba(125,185,232,1))),
    -webkit-linear-gradient(top, rgba(21,126,188,0) 0%,rgba(125,185,232,1) 100%),
    -o-linear-gradient(top, rgba(21,126,188,0) 0%,rgba(125,185,232,1) 100%),
    -ms-linear-gradient(top, rgba(21,126,188,0) 0%,rgba(125,185,232,1) 100%),
    linear-gradient(to bottom, rgba(21,126,188,0) 0%,rgba(125,185,232,1) 100%);

border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
box-shadow:0px 0px 5px 5px rgba(0,0,0,.6);
-webkit-box-shadow:0px 0px 5px 5px rgba(0,0,0,.6);
-moz-box-shadow:0px 0px 5px 5px rgba(0,0,0,.6);
}
 
Werbung:
Lade dein Problem auf einem Webspace hoch. Dadurch kann man dir einfacher helfen.

Wenn du noch keinen hast. Bplaced.net ist zu empfehlen.

Gruß

Hannover96xd
 
Hallo,

danke für Deine Antwort. Allerdings enthält sie keinerlei Info zu dem geposteten Code. Entspricht dieser tatsächlich den Regeln oder habe ich etwas durcheinandergebracht? Wenn er korrekt ist, warum zeigt mir dann kein Browser meine Hintergrundbilder an?

Bitte beantworte mir auch noch die Frage, inwiefern Du (/man) mir einfacher helfen kann(st), wenn ich ein simples HTML-Dokument mit lediglich dem oben geposteten <style>-Block und einem <p id="gehtnicht></p> poste.

Wenn du noch keinen hast. [...]
Zum Vergrößern anklicken....
1+ TB, aber danke für den Tipp.

Gruß
 
Werbung:
Ich habe keine Lust, mir deinen Code zu kopieren und eine Seite zu basteln, dann noch selber Bilder zu suchen und diese einzufügen. Und da mein Kopf kein HTML und CSS rendert kann ich dir den Fehler nicht sagen.

Bei einem Link müsste ich das nicht. Man will es ja den helfenden so einfach wie möglich machen, oder nicht?
 
Zuletzt bearbeitet:
Werbung:
Tobi44 schrieb:
Warum? Weil ein Kick fürs Entpacken zu viel ist? Aber solche Antworten zu schreiben geht dann...
Zum Vergrößern anklicken....

Werde nicht frech. Wer will hier Hilfe, du? Dann sei kooperativ. Außerdem, willst du etwas downloaden, obwohl du nicht weißt, ob da noch Trojaner oder andere Sachen drinnen sind? Das mag in deinem Fall hoffentlich nicht so sein, aber es gibt Leute die so etwas machen. Glaub mir.

PS:
Nun warst du ja doch noch kooperativ. Bin aber gerade leider mobil unterwegs und kann mir das erst nachher angucken.
 
Werbung:
Ich kenne es mit zwei bg-images, aber du hast hier drei. Im Zweifelsfall würde ich einen Workaround mit 2 Containern bauen.
 
@hannover
Wieder eine überflüssige Antwort. Wenn Du helfen möchtest, tue es bitte, aber werfe mir nicht vor, frech zu werden. Es zwingt Dich niemand dazu, mir zu helfen oder in diesem Thread zu antworten. Deine Aussage mit dem Trojaner ist übrigens lächerlich - dann dürftest Du ja gar nichts mehr irgendwo herunterladen. Denn Du kannst nicht vorher wissen, ob Schadsoftware in einem Download enthalten ist. Und wenn die Quelle noch so zuverlässig und seriös und bekannt zu sein scheint. Es soll Leute geben, die sich Zutritt verschaffen und Gefährliches einschleusen. Glaube mir.

Gruß
 
Hallo,

danke für Deine Antwort. Wie meinst Du das mit 3 Hintergrundbildern? Ich habe als erstes einen fallback-background mit nur einer Farbe (background:rgba(0,0,0,.1)), dann einen zweiten background mit 2 Hintergrundbildern und einer Reihe an Farbverläufen für die verschiedenen Browser.

Gruß
 
Werbung:
Tobi44 schrieb:
@hannover
Wieder eine überflüssige Antwort. Wenn Du helfen möchtest, tue es bitte, aber werfe mir nicht vor, frech zu werden. Es zwingt Dich niemand dazu, mir zu helfen oder in diesem Thread zu antworten. Deine Aussage mit dem Trojaner ist übrigens lächerlich - dann dürftest Du ja gar nichts mehr irgendwo herunterladen. Denn Du kannst nicht vorher wissen, ob Schadsoftware in einem Download enthalten ist. Und wenn die Quelle noch so zuverlässig und seriös und bekannt zu sein scheint. Es soll Leute geben, die sich Zutritt verschaffen und Gefährliches einschleusen. Glaube mir.

Gruß
Zum Vergrößern anklicken....

Also es ist schon ein Unterschied ob man hier etwas herunterlädt oder von apple.com.
Ein Problem mit jsfiddle.net zu präsentieren ist für uns das angenehmste und wird deshalb am liebsten gesehen, das wirst du wohl akzeptieren können.

Wenn man die Vendor Prefixes weglässt funktioniert es:
http://jsfiddle.net/uhof1w92/2/

Keine Ahnung ob man die wirklich braucht.
 
Hallo,

ich kann nun nicht so recht folgen - Dein Link ist exakt der den ich auch gepostet habe und wenn ich diese Seite nun aktualisiere sehe ich nach wie vor in keinem Browser weder den Farbverlauf noch die Hintergrundbilder.

Gruß
 
Gut, die Dinger kann ich natürlich auch selbst entfernen. Und tatsächlich klappt es damit. Kann das jemand erklären? Mal testen, ob es auch ohne diese Prefixe in anderen Browsern klappt.
 
Werbung:
Tobi44 schrieb:
Hallo,

ich kann nun nicht so recht folgen - Dein Link ist exakt der den ich auch gepostet habe und wenn ich diese Seite nun aktualisiere sehe ich nach wie vor in keinem Browser weder den Farbverlauf noch die Hintergrundbilder.

Gruß
Zum Vergrößern anklicken....

Habe vergessen auf speichern zu drücken:
http://jsfiddle.net/uhof1w92/5/

Tobi44 schrieb:
Gut, die Dinger kann ich natürlich auch selbst entfernen. Und tatsächlich klappt es damit. Kann das jemand erklären? Mal testen, ob es auch ohne diese Prefixe in anderen Browsern klappt.
Zum Vergrößern anklicken....

Bin mir gerade nicht sicher aber ich denke du müsstest für jeden vendor ein background angeben:
Code: 
background: url(…);
background: url(…), -webkit-gradient(linear, 0 0, 0 100%, from(#FFF), to(#000));
background: url(…), -moz-linear-gradient(#FFF, #000);
...
 
Zuletzt bearbeitet:
Ich hatte auf der Website eines Webentwicklers ein Beispiel nach hier gepostetem Schema gefunden. Habe gerade noch einmal nachgesehen und tatsächlich habe ich mich versehen, es muss immer ein neues "background:" angegeben werden. Damit funktioniert es auch in allen Browsern.

Finde ich aber trotzdem ziemlich umständlich, alle Hintergrundbilder 5x angeben zu müssen...

Danke für die Info.
 
Tobi44 schrieb:
Ich hatte auf der Website eines Webentwicklers ein Beispiel nach hier gepostetem Schema gefunden. Habe gerade noch einmal nachgesehen und tatsächlich habe ich mich versehen, es muss immer ein neues "background:" angegeben werden. Damit funktioniert es auch in allen Browsern.

Finde ich aber trotzdem ziemlich umständlich, alle Hintergrundbilder 5x angeben zu müssen...

Danke für die Info.
Zum Vergrößern anklicken....

Von Hand macht das auch niemand. Profis nehmen einen CSS Preprocessor.
zB: http://compass-style.org/reference/compass/css3/images/
 
Werbung:
Gehört nicht zum Thema, aber das will ich hier loswerden:
Der Tonfall von hannover96xd missfällt mir deutlich. Auch wenn man in der Sache Recht hat, kann man das sachlicher formulieren ohne Leute vor den Kopf zu stoßen. Und zu definieren, was WIR hier WIE handhaben steht in diesem Forum vieleicht zwei Hand voll Leuten zu, aber keinem mit knapp über 100 Beiträgen.
 
pax schrieb:
Gehört nicht zum Thema, aber das will ich hier loswerden:
Der Tonfall von hannover96xd missfällt mir deutlich. Auch wenn man in der Sache Recht hat, kann man das sachlicher formulieren ohne Leute vor den Kopf zu stoßen. Und zu definieren, was WIR hier WIE handhaben steht in diesem Forum vieleicht zwei Hand voll Leuten zu, aber keinem mit knapp über 100 Beiträgen.
Zum Vergrößern anklicken....

Du bist aber sehr empfindlich …
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben