Background-repeat Probleme

html.de-Forum HTML, XHTML & CSS
1

Hallo Leute =)
Folgende Programmzeile:

<div align="center" style="position:absolute; z-index:1; height:150px; width:100%; background-image:url(bilder/bgfillh.gif); background-repeat:repeat-x;"> Das Problem an der Sache ist das er den Hintergrund nur auf die Breite des grad aktuell vorhandenen Monitores ausrichten. Wird das Bild kleiner oder größer verschiebt sich das ganze leider. Ich möchte es aber auch gerne so programmieren das es sich automatisch mehr als nur die 100% wiederholt. So das es immer vorhanden ist und nicht auf einmal aufhört.

Ist das machbar?

Grtz Chrille

EDIT:
Es geht nicht so wie ich dachte… folgende Datein habe ich als Hintergrund

http://larrystanzhaus.de/temp/bilder/bgfillh.gif und
http://larrystanzhaus.de/temp/bilder/bgfillv.gif

Einmal für die Breite, einmal für die Höhe. Doch wie kann ich jetzt sozusagen 2x das Background-repeat mit einbringen?

2

Das Bild wird mit background-repeat: repeat-x in der Breite soweit ausgedähnt/wiederholt wie möglich. Wird das Bild
selbst kleiner erhöht sich die Anzahl der Wiederholungen . Ein kleineres Browserfenster ändert auch nix an dem Effekt (probiers mal aus), der ja in der Natur der Eigenschaft steckt…
Da stellt sich die Frage: Was willst du eigentlich genau?

Ich möchte es aber auch gerne so programmieren das es sich automatisch mehr als nur die 100% wiederholt

wie gesagt es tut sich nicht in % sondern in der Anzahl an sich wiederholen.

So das es immer vorhanden ist und nicht auf einmal aufhört.

Das ist es schon, es sei denn die Box liegt ausserhalb des Sichtfeldes bei verkleinertem Browser bzw. Sichtfeld.

Wenn es die ganze Seite füllen soll (nicht nur die eine Box) notiere die Eigenschaften in

body {
...
}
3

Ab CSS3 wird es möglich Hintergründe zu dehnen/skalieren. CSS3 ist jedoch noch nicht in allen Browsern eingeführt.
CSS Backgrounds and Borders Module Level 3

P.S.:

Folgende Programmzeile:

Weder HTML, noch CSS, sind Programme. Dementsprechend kann man sie nicht programmieren, weshalb sie auch keine Programmiersprachen sind.

Du solltest alle Inline-Styles in ein externes Stylesheet verlagern.

Gruß

4

Ok, danke schon mal für die Antworten =)
Asche auf meine Tomaten für die „Programmzeile“ xD Was soll ich dann sagen? fg
Die Idee mit dem Body klingt gut, jetzt ist nur die Frage ob ich die mehrere angeben kann, mal gucken. Denn ich habe jeweils eine Datei die Horizontal und eine Datei die Vertikal wiederholt werden muss.

Du solltest alle Inline-Styles in ein externes Stylesheet verlagern.

Sind sie ja auch :wink: Ich habs nur gerne wenn einige Dinge dann doch noch in der Datei selbst liegen! :smiley:

Aber danke sehr für die Hilfe =)

Grtz Chrille

5

Hallo.

Du solltest wirklich mal genau erklären was du willst.
Wenn du einen Rahmen erzeugen willst geht das mit CSS border. Zwei Hintergrund Grafiken im selben Element kannst du nicht anzeigen.

Gruss
Elroy

6

Also gut, ich hol mal weiter aus!
Es geht um folgende Website: Larry’s Tanzhaus

Das Design an sich steht schon und ich bin auch damit zufrieden wie ich es bis jetzt aufgebaut habe. Es geht mir folgender maßen jetzt um diese beiden Teile:

Dort mit drin sind jetzt auch die 2 „Balken“ die die Orangen Balken von Links nach Rechts und von Oben nach Unten anzeigen. Wenn ich das jetzt so per DIV Container mache, dann funktioniert das wunderbar auf der Anzeige mit widht:100%;. Ändere ich jedoch die Browsergröße gehen diese Balken nicht mehr bis zum Ende des aktuellen Bildes sonder enden da, wo sie ihre 100% erreicht haben. ( Ist auch logisch, der DIV Conatiner geht ja nur bis 100% bis zu Seitenende und nicht weiter )

Jetzt könnte ich einen Balken darstellen indem ich den Bereich „body“ mit den background-repeat darstelle. Jedoch kann ich ja damit nur den Quer- oder Längsbalken darstellen. Daher bräuchte ich irgendwie eine Idee womit ich das background-repeat am besten 2x im Body Bereich definieren kann ( Was ja an sich nicht geht )

Also, habt ihr eine Idee? Oder fehlen noch Infos?

Grtz Chrille

7

Ich würde den vertikalen Balken als Hintergrundbild von body setzen und den horizontalen einfach über einen div in body realisieren. Grob:

[code]

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>New</title>
</head>

<body style="background: #0f0 url(http://www.larrystanzhaus.de/temp/bilder/bgfillv.gif)
      top left repeat-y; margin: 0; padding: 0;">

    <div style="background: #f00; height: 100px;"></div>

</body>
[/code]
8

Und dadurch wird dann der horizontale auch immer dargestellt, egal wie groß jetzt das Bild ist? Auch wenn man es ändert?

Grtz Chrille

9

Ja. (Bzw. was heißt „immer dargestellt“?) Habe noch mal schnell deine andere Grafik reingemacht:

[code]

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>New</title>
</head>

<body style="background: #0f0 url(http://www.larrystanzhaus.de/temp/bilder/bgfillv.gif)
      top left repeat-y; margin: 0; padding: 0;">

    <div style="background: #f00 url(http://www.larrystanzhaus.de/temp/bilder/bgfillh.gif);
         height: 100px;"></div>

</body>
[/code]
10

Joa, genau so geht das :smiley: Super :smiley:
Mit immer darstellen meinte ich, wenn man das Bild kleiner macht oder größer, verschwindet manchmal einfach die Leiste rechts und links unten für ein Stück. So wie es jetzt ist geht es prima…

Super danke :smiley:

Grtz Chrille

EDIT: Liegt es daran wenn ich keine Weite eingebe das er dann das „auto“ nimmt und es dann selbständig weiter macht? Oder verstehe ich das gerade falsch?

EDIT2: Zeigt er es bei euch jetzt richtig an? Bei Phase5 zeigt er es bei mir auch richtig an und sobald es oben ist hat er kein horizontale Leiste^^ Komisch… Cache auch schon gelehrt… oh man^^

11

@EDIT: Ein Block-Level-Element (zum Beispiel

) nimmt standardmäßig immer den maximalen horizontal zur Verfügung stehenden Platz ein.

@EDIT2: „The requested URL /temp/bilder/bgfillh.gif was not found on this server.“

12

Phase5 ist kein Browser, standardmässig greift der auf eine (nicht näher definierte) „explorer.dll“ zu. Falls nicht schon geschehen, kannst Du das „Einstellungen“ und „Browser intern/extern“ auf jeden beliebigen, auf Deinem System installierten Browser ändern (auch mehrere).
Der Vorteil ist dann, dass Du einerseits weist, welchen Browser Du tatsächlich ansprichst, und andererseits, etwas Pflege Deines Systems vorausgesetzt, ist der Browser tatsächlich immer auf dem neuesten Stand.
Grüsse
low

13

Ah sehr schick, grad daheim und fix die Datei hochgeladen und zack geht es :smiley: Super! Danke euch Leute =)

Grtz Chrille