Rechteck die größe 100% zuweisen?

Kommandant · 18.10.2006, 12:11

Moin,

ich denke mal, dass dieses Thema hier schon oft besprochen wurde, jedoch konnte ich nichts für mich passendes finden.

Ich habe Seite erstellt, wo die Leinwandfarbe tranzparent ist, dann habe ich ein Rechteck mit einem Farbverlauf erstellt, welches genau die gleichen Abmessungen hat, wie die Leinwand.
Wenn man sich jetzt diese Seite aber mit einer höheren Auflösung anschaut, sieht man logischerweise große weisse Balken links und rechts.

Wie kann ich dem Rechteck als größe jetzt 100% zuweisen, damit es egal bei welcher Auflösung immer den gesamten Hintergrund ausfüllt?

Schöne Grüße und vielen Dank schon mal.

Ps.: Bei meinen vielen Fragen sollte ich wohl so langsam mal Sponsor werden *g*

Boris · 18.10.2006, 12:29

Mit Fireworks überhaupt nicht, das geht mit HTML und ein wenig CSS. Damit kennst du dich wahrscheinlich aber nicht aus, oder?

Kommandant · 18.10.2006, 12:36

*lach* naja, ein bischen schon aber halt nicht viel

ich hab schon gelesen dass man dem Bild im quelltext weight und height auf 100% setzen soll. Wäre ja auch soweit kein Problem aber FW hat das große Rechteck in viele kleine aufgeteilt... ansonsten wäre dass ja auch nicht so das Problem.

Boris · 18.10.2006, 12:42

Zitat:

weight

Also "Gewicht" nicht gerade, aber width (=Breite).

Ja, das muss man auch machen.

Du musst selbst das Hintergrundbild so erstellen, dass man es kacheln kann - dann entsprechend ausschneiden und als Hintergrundbild definieren.

Wie schaut das Bild/Rechteck denn aus?

Kommandant · 18.10.2006, 12:46

lol, ja, width ist schon besser ja

hab das Rechteck als jpg angehängt.

Entschuldige bitte, aber was meinst du mit Kacheln?

Boris · 18.10.2006, 15:22

Kacheln halt. Hast du noch nie Kacheln in einem Badezimmer gesehen?

Im Ernst, man kann ein Muster/Bild halt als Hintergrundbild setzen und es quasi mehrfach "wiederholen" lassen. Das nennt sich kacheln.

Wenn du dein Rechteck jetzt so ausschneidest, dass es 1px breit und 712px hoch ist, kannst du dieses Bild mit CSS in den Hintergrund setzen und es kacheln lassen, z.B. so:

body
{
background: #000 url(hierdasbild.jpg) repeat-x;
}

Kommandant · 18.10.2006, 15:43

Ich verzweifel an diesem ganzen scheiss noch mal...

wieso immer ich?

Nee, tut mir leid, dass ich mich so blöde anstelle, komm man sich vor wie ein DAU...

Also, ich hab das Bild so zu geschnitten, wie du es gesagt hast. Soll ich dann jetzt quasi das große Rechteck aus der png-Datei löschen und stattdessen die 1px breite einfügen und dann noch irgentwas mit diesem css machen, ja?

und den code den du gepostet hast habe ich in den quelltext eigefügt, aber das war wohl auch nich so wirklich richtig, weil der code einfach als Text ausgegeben wurde -.-

ich sag ja, alles mist, wieso immer ich?...

Danke für deine Hilfe erstmal

Boris · 18.10.2006, 15:46

Das ist eine CSS Anweisung. StyleSheets ... die gehören nicht einfach irgendwo reingeklatscht, sondern zwischen den <head>...</head> Bereich, ganz einfach so:

<style type="text/css" media="screen,projection">
body
{
background: #000 url(hierdasbild.jpg) repeat-x;
}
</style>

Beschäftige dich mal ein wenig mit den HTML/CSS Grundlagen: www.css4you.de

Kommandant · 18.10.2006, 16:03

wie geil, das hat funktioniert

jedenfalls zum teil. Weil jetzt ist der weisse Rand weg aber dafür ist dieser nun schwarz

Aber das liegt doch bestimmt daran, dass ich das große Rechteck noch in der png-Datei drinne habe oder?

Danke

Boris · 18.10.2006, 16:10

Ich hab keine Ahnung, wovon du sprichst. Dass der Rand schwarz ist, liegt am #000 in der CSS Angabe (ist halt die Farbe schwarz). Soll es weiß sein, schreib #fff da rein

Ansonsten - stell deinen Kram doch mal online.

Kommandant · 18.10.2006, 16:13

Nein, daran lag es wohl auch nicht... Hab ich grade ausprobiert. Wenn ich das aus der png rauslösche und neu exportiere, den ganzen code wieder in die html datei einfüge, speichere und sie dann öffne ist da wo vorher das große recheck war alles weiss und der Hintergrund ist schwarz.

Was habe ich dort nun schon wieder falsch gemacht?

Kommandant · 18.10.2006, 16:20

ja, ist wohl besser, hier ist die png Datei (die bilder habe ich alle rausgenommen, sonst wäre sie zu gross) :

Rea · 18.10.2006, 18:50

Kommandant,

je nachdem, ob dein Verlauf von oben nach unten oder von links nach rechts
geht, erstellst du ein Rechteck von entsprechender Länge/Breite, weist dem
dann aber insgesamt nur eine Breite/Länge von 1 Pixel zu. So sparst
du dir nen Haufen Bytes.
Okay, das Teil exportierst du als BG.gif solo in deinen images-Ordner und
dann verfährst du genauso, wie Boris dir das hier schon erklärt hat.

Musst mal in der Suche Verlauf usw. eingeben, da findest du einige
Tricks, wie du umgehen kannst, dass das Ganze stufig wirkt.

Kommandant · 18.10.2006, 19:15

Danke euch beiden erstmal. Aber irgentwie funktioniert das nicht so recht... bzw. hab ich irgentwas nicht richtig gemacht.

Anbei ein Screenshot von der Seite (wie sie ausschaut nachdem ich den Code eingefügt habe)
und dann noch der quelltext.

Vieleicht entdeckt ihr da ja einen Fehler

Torsten · 19.10.2006, 08:40

Du hast die CSS-Anweisung nicht korrekt eingebunden.
So müsste es klappen:

PHP-Code:


			
<style type="text/css" media="screen,projection">
<!--
body
{
background: #000 url(C:\Dokumente und Einstellungen\USER\Eigene Dateien\Websites\fbox_nachbau\HTML\bilder\bg.gif) repeat-x;
}
-->
</style>

Wobei mir der Pfad zum bg.gif nicht so ganz korrekt vorkommt