|
|||
Darstellungsfehler auf Tablet… Rand um Bild
Hatte gerade auf einen acer Tablet (Android - Chrome/Firefox) eine Site getestet und festgestellt das da um ein Bild (WelleUnten) ein transparenter Streifen oben und ein farbiger Streifen unten ist (siehe Bild).
Auf meinen MacBook in Safari/Chrome/Firefox ist der Fehler nicht zu sehen. Hat jemand eine Idee wie man das lösen kann oder wo der Fehler ist? Danke! HTML-Code:
<!DOCTYPE html> <html> <body> <link rel="stylesheet" href="design.css"> <div id="Box"> </div> <div id="zwischenbild1"> <div id="WelleUnten"> </div> </div> </body> </html> PHP-Code:
|
Sponsored Links |
|
|||
Hallo,
hier hat niemand deine Bilder. Bau die Seite so zusammen, dass man das Problem erkennt. Für Fragende und Antwortende |
Sponsored Links |
|
|||
die Welle (ist eine kleine Halbkugel 30px breit im png Format) soll sich auf der X Achse wiederholen aber auf der Y Achse nicht also background-repeat: repeat no-repeat; Der Obere Streifen ist bei margin: -1px; weg Der untere Streifen ist weg wenn ich bei background-repeat: no-repeat; schreibe aber dann wiederholt sich natürlich die Welle nicht ??? hat jemand eine Idee? |
|
||||
Das Halbkugel-Bild genauer untersuchen – Format, dpi, Transparenz, etc. Auf die Schnelle sehe ich oben einen transparenten Streifen (1px hoch).
Für die Welle bräuchtest Du eigentlich kein extra Bild – die könntest Du im Bild unten „einbauen“. Geändert von etux (16.01.2015 um 09:58 Uhr) |
|
|||
Das Hintergrundbild (zwischenbild1) ist fixed und die Box und die Welle zum scrollen also ich kann die Welle nicht in das Hintergrundbild einbauen da sich die Welle mit der Box beim scrollen bewegen soll.
Das Bild ist auch OK! Format: png24 Auflösung: 72dpi Transparenz stimmt auch hier das Beispiel |
|
|||
Es hat auf jeden Fall etwas mit background-repeat: repeat; zu tun
das Bild mit der Halbkugel (die Welle) das sich repeat'n soll ist 30px breit. Ich habe das Bild mal in Photoshop auf 1440px (meine max-width) breit gemacht und bei background-repeat: no-repeat; dann gibt es den Fehler nicht |
|
||||
Wenn man richtig mit der Wiederholung umgeht, kann es auch funktionieren.
background: transparent url('http://emkw.de/test/WelleOben.png') repeat-x 0 0;
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Sponsored Links |
|
|||
Hallo Thilo, das hat das Problem leider nicht gelöst.
ich hab jetzt die Welle in Illustrator auf 1440 px breite erstellt und als svg gespeichert und bei background-repeat: no-repeat; und bei background-size: cover; und bei margin-top: -1px; nur so konnte ich es jetzt lösen. Aber es sollte doch auch eine einfachere und bessere Lösung geben |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Zwei Bilder nebeneinander, sollen kleiner werden! | cecyle | CSS | 1 | 12.01.2014 19:20 |
3 divs nebeneinander anordnen | Schokokrapfen | CSS | 5 | 28.09.2011 19:15 |
Onmouseover-Effekt - Wenn Maus auf Bild1 soll Bild 2 zu Bild 3 wechseln. | Andreas91 | Grafik, Design, Typografie | 1 | 06.09.2011 23:41 |
Bild durch Bild ersetzten! (a:hover) | Prof. Awesome | CSS | 11 | 16.03.2011 15:33 |
Bild über Bild | rafa | CSS | 2 | 24.01.2010 19:46 |