#1 11. August 2010 Zuletzt von einem Moderator bearbeitet: 14. April 2017 2 Hintergrundbilder + 1 Hintergrundfarbe Hey Leute Auf meiner Seite habe ich einen Verlauf als Hintergrund (1px breit, 600px hoch) und dazu einen Hintergrundfarbe in den Farbton hat, die der Verlauf ganz unten hat. Beides steht einfach im Body-Tag. Code: <body bottommargin="0" topmargin="0" leftmargin="0" rightmargin="0" style="background-color:#343434; background-image:url(img/lay/1.png); background-repeat: repeat-x;"> Jetzt will ich aber noch einen Hinterbild mit transparenten Hintergrund auf den Verlauf und auf die Hintergrundfarbe drauf haben. Ich habe es mit einem Div-Layer versucht. Breite war 100%, das hat geklappt, aber die Höhe war immer nur so groß wie der Inhalt. Die Höhe sollte auch 100% sein. Weiß einer wie ich das mache? Danke, Greetz EDIT Hier ein Skizze Der transparenter Hintergrund (über den Verlauf und über der HG-Farbe) ist größer als viele Auflösungen, damit auch User mit größer Auflösung was davon haben. + Multi-Zitat Zitieren
#2 11. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe HTML: <html> <head> <style> body { background-color:#000000; height:100%; width:100%; padding:0; margin:0; } #wrapper { background-color:#ffffff; min-height:100%; height:100%; margin:0px auto; padding:0; } </style> </head> <body> <div id="wrapper"> </div> </body> </html> als beispiel. wie du siehst, wird der body bg schwarz(#000000) von dem div (#ffffff) vollständig überlagert. + Multi-Zitat Zitieren
#3 11. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe Min-height ist allerdings nicht xHTML valid und wird afaik auch nicht von Safari unterstützt... Ich würde einen mix aus beidem machen! Du machst per JavaScript eine Funktion, wo du die Größe des Layers auf die gesamte Größe des Displays stellst, wenn der Layer kleiner ist als der Display.. Und zusätzlich bindest du per <noscript> dann den Style-Sheet von b-xXx ein.. MfG + Multi-Zitat Zitieren
#4 11. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe das min-height könnte auch raus, glaube ich sogar^^. + Multi-Zitat Zitieren
#5 11. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe besser mit photoshop ein bild 1x1px mit transparenten hintergrund erstellen. Dann diesen bereich mit farbe füllen schwarz oder weiss, ebenendeckkraft auf ca 50% setzen und als gif abspeichern. Ja und halt als hg in deiner tabelle oder div zuweisen. + Multi-Zitat Zitieren
#6 11. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe Also ich will ja jetzt echt nicht meckern, aber du gibst momentan sehr oft totale dumme Posts von dir.. Im 1. Post steht, dass er einen Farbverlauf hat, der zB 300px hoch ist.. Und unten geht das dann mit sagen wir mit weiß weiter.. Das mit dem weiß geht dann aber auf die komplette Höhe der Seite.. Also vom Ende des Verlaufs bis zur Unterseite des Browsers.. Und da kann er keine gif in PS nehmen, weil er nunmal den Verlauf hat und außerdem nicht weiß, wie hoch die Seite ist, da das ja abhängig von der Auflösung des Users ist... MfG + Multi-Zitat Zitieren
#7 12. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe ... Er will doch einen transparenten effekt oben über den farbverlauf haben. Ich nehme an, dass der verlauft die x-achse lang geht. Wo liegt das problem? + Multi-Zitat Zitieren
#8 12. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe an sich ist das ohne javascript meines wissenstandes nicht möglich, lasse mich aber gerne eines besseren belehren... warum ist es denn genau so wichtig das der div 100% hat? erkläre vllt mal weiter, oft lässt es sich auch irgendwie anders lösen ohne javascript und allem! + Multi-Zitat Zitieren
#9 13. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe nja meine lösung funzt wohl nicht oder was....? dem div halt statt ner farbe die transparente grafik geben und dann background-attachement oder sonstige attribute die benötigt werden einfügen. wäre auch nice mal ein screen zu sehen, um welche grafiken es sich handelt + Multi-Zitat Zitieren
#10 13. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe min-height an sich würde schon klappen, allerdings nicht bei 100%. da müsste man schon ne feste höhe wissen und um die von dem gesamten screen raus zu bekommen muss man auf js zurückgreifen, was aber nicht gerade elegant wäre! am besten ist wirklich du gibst mal ein paar genauere angaben damit man sich eine art work arround ausdenken kann. edit: mir fällt gerade ein, man könnte dem ganzen auch ne feste höhe von sagen wir 5000px geben und dann dem body overflow:hidden; geben, würde aber auch nur wenig sinn machen: wenn der inhalt größer wird als der monitor des users es her gibt wird er abgeschnitten... ich denke da nur an smartfones die zur zeit eine maximale auflösung von 800x600 px haben + Multi-Zitat Zitieren
#11 13. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe nja das min-height ist überflüssig.... wenn die transparente grafik z.B. immer oben angezeigt werden soll --> kann er ja einfach background-attachement setzen. wenn die grafik eine fest höhe hat - umso besser... dann height einfach durch die feste höhe ersetzen. das mit body-overflow hidden würde ich nicht empfehlen... aber mal abwarten und tee trinken, was der user dazu sagen hat bzw. uns noch genaueres zeigen kann. + Multi-Zitat Zitieren
#12 18. August 2010 Zuletzt von einem Moderator bearbeitet: 14. April 2017 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe So, nur OHNE min-hight sah meine erste Lösung aus. Das werde ich jetzt als erstes mal einbauen. Danke, BW an alle ist raus. EDIT Hier ein Skizze Der transparenter Hintergrund (über den Verlauf und über der HG-Farbe) ist größer als viele Auflösungen, damit auch User mit größer Auflösung was davon haben. + Multi-Zitat Zitieren
#13 18. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe so ganz versteh ich denn sinn nicht^^ aber okay, noch eine frage... die eckigen elemente die in der skizze sind, sollen das html elemente sein oder auch irgendwelche bilder die auf der transparenten ebene sind? mit css3 gibt es die möglichkeit mehrere hintergründe auf einem element zu überlagern, falls dir das was bringen sollte: HTML: background-image: url(oben.gif), url(links.gif); Quelle + Multi-Zitat Zitieren
#14 18. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe Das sind Teile sind Bilder auf dem sonst transparenten Hintergrund. + Multi-Zitat Zitieren
#15 18. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe nja aber die auflösung des users ist kleiner als der transparente hintergrund?.... was soll das bringen... versteh den sinn nicht ganz. + Multi-Zitat Zitieren
#16 18. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe vorschlag: warum packst du dann nicht einfach alles auf eine ebene, also machst eine große datei mit einer breite von 1920 und einer höhe, je nachdem wie weit die bilder der transparenten fläche nach unten hin sichtbar sein sollen. man denkt vllt erstmal, dass es ne riesen grafik wird und dann der user ziehmlich lange laden muss, aber sein wir ehrlich... bei na kompressionsrate von 40% als jpg sind wir bei vllt 150-200kb, dass ist nicht viel... da wird ne transparente png auf jedenfall großer werden, auch wenn die ggf. nicht ganz so groß ist... also wenn ich dein problem jetzt richtig verstanden habe wird das mit sicherheit die beste lösung sein, oder halt wirklich mit css3 und verschiedenen hintergründen, funktioniert dann halt nur mit den neueren browsern... @b-xXx: der sinn dahinter wird sein, dass es user mit auflösung von 1024x768 geben wird und welche die mit 1920x1080 drauf surfen werden und die die mit 1080p drauf gehen sollten dann alles sehen können. + Multi-Zitat Zitieren
#17 19. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe Code: * { margin: 0; padding: 0; } body { width: 100%; height: 100%; } .main { background-image: url(blabla.png); background-repeat: repeat-x; background-color: #badf00d; width: auto; height: 123px; z-index: 1; } .layer { background-image: url(blabla.png); width: 100%; height: 100%; position: relative; top: 0; z-index: 2; } .layer .entity { } Code: <div class="main layer"> <div class="entity"></div> <!-- Entity muss halt noch gesetzt werden --> </div> So ähnlich sollte es eigentlich funzen. Layer bezieht seine Größe immer aus dem Elternelement und da der hier body ist (Mit 100%-Werten), erstreckt er sich über den kompl. Bildschirm. Hab's jetzt aber noch net ausprobiert und is auch schon n bissl spät^^ + Multi-Zitat Zitieren
#18 19. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe Habe ich versucht, aber die Datei ist fast 500kb groß. Ich habe dann ja den ganzen Verlauf auch noch als Bild. Ich werde jetzt mal das von terraNova versuchen. Danke, BWs an alle sind raus. + Multi-Zitat Zitieren
#19 19. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe Also bin mir grad nicht sicher aber sowie ich das verstanden habe willst du deinen verlauf beibehalten und drüber ne art transparentes muster legen.. wenn das soweit stimmt dann ist das problem relativ leicht zu lösen und zwar per css.. und zwar setzen wir den hintergrund des html tags auf den verlauf und die des body tags auf die transparente garfik.. so sollte der code etwa ausschaun.. HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> html, body{ min-height: 100%; } html { background: url('background.png') repeat-x #000; } body { background: url('muster.png'); } </style> </head> <body> </body> </html> PS: Seit wann soll den min-height invalid sein? + Multi-Zitat Zitieren
#20 20. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe Ist es doch garnicht? + Multi-Zitat Zitieren
#21 20. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe wie groß wird die datei denn dann von den pixeln? also ich hatte es extra noch ausprobiert mit na großen grafik bevor ich gepostet hab^^ haste auch "für web" gespeichert und die qualität ein bisschen runtergezogen?! bzw als welchen dateityp hast du es gespeichert? wobei ich mir irgendwie nicht vorstellen kann, dass die transparente datei, die du dann ja als png speichern musst und auch ziehmlich groß sein müsste, kleiner wäre als ne große jpg-datei... allerdings muss ich gestehen, die lösung von dreamax hört sich inteligent an^^ + Multi-Zitat Zitieren
#22 21. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe ein problem bei na transparenten png grafik wäre, dass der internet explorer 6 und älter keine transparenz darstellen kann und die seite so mit einem hässlichen hintergrund angezeigt würde. und so alt der ie 6 auch ist, er wird immernoch von fast 40 % aller internetnutzer verwendet... mal was anderes, wozu willst du denn eigentlich eine transparenz über dem hintergrund haben? + Multi-Zitat Zitieren
#23 25. August 2010 AW: 2 Hintergrundbilder + 1 Hintergrundfarbe gibt da nen ie fix, weiß allerdings nicht genau bis welchen browser der das abdeckt... musste mal googlen: ie png fix js - Google-Suche oder so... 40% möchte ich für stark übertrieben halten! kann mich zwar auch irren, aber meine persönliche erfahrung ist das in letzter zeit sehr sehr viele leute auf firefox und co umsteigen! warum auch immer. glaube nicht das es noch so viele mit so alten browsern gibt... hab aber auch lange keine statistiken mehr studiert, haste da ne quelle? + Multi-Zitat Zitieren