background: repeating-radial-gradient nicht Ganzseitig
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anfang
angabe
auto
code
container
effekt
einstellen
festlegen
hintergrund
http
jemand
kreisen
laufen
muster
nennen
pixel
problem
syntax
url
weben
-
Das ist das erste mal das ich was in html und css nicht weiß.
Ich mochte einen Hintergrund mit
background: repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%);
festlegen
Nun war aber nicht die gesamte Internetseite mit diesem Muster bestückt.
Wie kriege ich das hin das die ganze Seite bedeckt ist.
Ich habe gegoogeld yahoot.
und viele Lösungen ausprobiert doch keine funktioniert.
Achso der Hintergrund soll nicht einfach wiederholt werden das das habe ich mit non-repeat gemacht das funktioniert auch wollte ich nur nennen.
Nicht das hier jemand den Vorschlag macht das ich den Hintergrund immer wiederholen soll.
-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat:no-repeat; margin: auto; /* Den Container zusätzlich zentrieren */ min-height: 100%; /* Mindesthöhe auf 100 % (bei modernen Browsern) */ height: auto !important; height: 100%; background-height: 100%;
Diese verschiedenen befehle und noch mehr ausprobiert
Beitrag zuletzt geändert: 2.12.2013 16:53:29 von willstdueswissen -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du wendest mit "repeating-" einen Effekt an, der sich immer wieder wiederholt. Lass das doch mal weg und setze den Hintegrund für body, dann sollte es schon besser aussehen.
PS: Bei solchen Fragen ist es immer eine gute Idee, auf eine Seite zu verlinken, bei der man das sehen kann, denn dann habe ich die Möglichkeit über Firebug oder die Entwickler-Werkzeuge das ganze auszuprobieren, bevor ich dir die Lösung sage. ;) -
Jetzt habe ich das repeating entfernt
Doch jdzt sieht das noch schlimmer aus
Ich wollte ja das der Effekt auf der ganzen Seite fortgesetzt
Dieser hörte irgendwann auf
Ach bei repeating
Aso hier der Link http://willstdueswissen.lima-city.de/Sanyo/
Ich hatte damit noch gar nichts zu tun
Wäre nett wenn mir einer die Lösung geben kann -
body { min-height: 1000px; // Deine Seite braucht eine gewisse Höhe, damit der Hintergrund nicht auf einmal aufhört ;) background: radial-gradient(circle closest-side at 50%, red, yellow, green 25%, yellow 50%, red 100%); }
Das ist alles, was du brauchst. Geändert habe ich "closest-side at 50%", das war vorher der grund, dass dein Ring so klein war. Auch die Werte über 100% habe ich gestutzt. Spiel einfach ein bisschen damit und schau dir an, wie es wirkt. :) -
http://www.lima-city.de/images/photos/04jaZemjujyLluZ34wXOsRD7NQxveL.jpg
Hmm immer noch nicht wie ich es haben will, aber ich habe jetzt ne Seite hearaus gesucht die das beschreibt wie ich es haben will, das aber bei mir irgendwie nicht funktioniert:
Das wollt ich so haben das der Kreis links oben ist
Also das das wie Schallwellen von Links oben herkomen und durchgehend weiter laufen also nie aufhören
ich hoffe du verstehst was ich meine
http://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-radial_repeating -
background: repeating-radial-gradient(at 0% 0%, red, yellow 10%, green 15%);
Setze dich mal mit der Syntax von repeating-radial-gradient auseindander:
https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient -
tchab schrieb:
background: repeating-radial-gradient(at 0% 0%, red, yellow 10%, green 15%);
Setze dich mal mit der Syntax von repeating-radial-gradient auseindander:
https://developer.mozilla.org/en-US/docs/Web/CSS/radial-gradient
Da bin ich ja wieder am Anfang, das hatte ich ja schon mal, aber mein Problem ist ja nicht das ich dieses Muster nicht hingekomme ich hatte es ja schon mal am Anfang bist du geagt hast ich soll dieses repeating rausnenehmen.
und jetzt ist es wieder drin.
Noch mals mein Problem besteht darin das das Muster irgendwann aaufhöt und wieder wo es aufgehört hat vvn neuem beginnt es soll aber durchgängig sein.
Der Kreis soll weiter laufen.
Ja ich habe jetzt auch deine genannte Seite durch gelesen und da stand auch nix davon oder ich bin blind.
Wenn ich blind bin dann brauche ich unbedingt ne Brille. -
Falls noch jemand das Problem hat, ich habe eine Lösung heraus gefunden, die Browser unabhängig ist.
<meta name="HandheldFriendly" content="true" /> <meta name="viewport" content="width=device-width, height=device-height">
Dieser meta Tag veranlässt das der content auf die Höhe und die Breite eingestellt werde
Dort kann man aber auch breiter oder höher einstellen mit eine Zahl statt device-.......
Diese steht für für eine Angabe in Pixel
Um so größer content eingestellt wieder, umso größer ist der Hintergrund ohne Unterbrechungen
Edit: Desweiteren habe ich herausgefunden das die Angaben zum Viewport auch in css stehen kann:
@viewport { width: device-width; height: device-height;}
Hier muss man aber beachten das die Pixelangaben mit px aufhören
Beitrag zuletzt geändert: 4.12.2013 11:44:43 von willstdueswissen -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
