Hintergrundbild

Hallo, ich bin gerade beim Üben von Hintergrundbild. Aber irgendwie geht es nicht.

Das Beispiel vom HTML funktioniert:

Auch auf meiner Übungsseite ist das Bild zu sehen, also stimmt scheinbar auch die Adresse:

Wenn ich es aber quasi kombinieren will, dann kommt nichts:

Ich hab schon verschiedene Kombinationen ausprobiert. Auch die direkte URL des Bildes eingegeben.

Tina

Moin,

zwischen die Klammern kommt nur die URL. Also muss es statt

folgendes heißen:

hier auf einfache anführungszeichen verwenden, da du innerhalb von doppelten Anführungszeichen nicht nochmal unmaskierte doppelte Anführungszeichen verwenden kannst.

Gruß, Markus

Hallo Markus,

vielen Dank, nun geht es (Schade, hier gibt es keinen Blumenstrauß Smilie).

Noch was anderes:

Das Bild wiederholt sich ja, wie ein Art Raster.

Wie geht das, das Bild nur einmal zu zeigen, in vollter Bildschirmgröße?

Tina

background-repeat:no-repeat;

[quote=“Tinaro”]in vollter Bildschirmgröße?
[/quote]
puh, so direkt geht das nicht

Aber in den Code oben steht gar nichts von repeat? Dann würde ich es ja verstehen.

Wenn es nicht so direkt geht, dann halt indirekt

Tina

Standardeinstellung ist mit Wiederholung. Um das zu umgehen muss man es abstellen.

In der Regel nutzt man auch keine einzelnen großen Hintergrundgrafiken, sondern eine kleine simple Grafik, welche sich dann per repeat über die gesamte Fläche verbreitet. Das ist nicht nur schonender für den Traffic sondern sieht auch in der Regel wesentlich besser aus. Außerdem muss man sich dann keine Gedanken um irgendwelche auflösungen machen.
Die Hintergrundgrafik kann man übrigens nicht an die größe anpassen… das einzige was man mit width/height anpassen kann ist der sichtbare Teil der Grafik, die Angaben können aber nicht dazu genutzt werden die Hintergrundgrafik zu skalieren.

Danke.
Wieder was gelernt. Mühsam geht es voran…

Tina

Naja man kann die Größe schon anpassen.
Zum Beispiel indem man in den body ein
einfügt.
Alternativ kann man zum position:absolute auch ein position:fixed machen.
Dann wird das Bild proportional an die Bildschirm/Browserbreite angepasst. Kann bei nem entsprechenden Bild natürlich dazu führen, dass das nicht hoch genug ist. Dann könnte man auch noch ein height:100%; hinzufügen. Dann wird es aber natürlich verzogen.

Gruß, Markus

Daß man das CSS-Hintergrundbild nicht an die Größe des
Anzeigebereiches anpassen kann, stimmt so auch nicht, das
hängt vom Bild oder vom Format ab. Wenn im Bild Abmessungen
etwa in Pixeln explizit angegeben sind, richtet sich danach die
Größe des Hintergrundbildes (in CSS2). In einem Format wie
SVG kann man hingegen auch die Größe in Prozent angeben und
auch, wie das Aspektverhältnis bei der Anzeige berücksichtigt
werden soll, dann paßt sich solch ein Hintergrundbild, bei Bedarf
auch mit Pixelgraphik drin, auch den Abmessungen des Elementes
an, für welches es als Hintergrundbild verwendet wird.
Nicht alle aktuellen Versionen von gängigen browsern können
allerdings SVG-Bilder als Hintergrundbilder darstellen. Opera
kann das schon länger und ich meine auch neuere Versionen von
WebKit können das. Firefox 3.5 kann es etwa noch nicht.

Bei CSS3 gibt es da aber wohl auch Fortschritte für Pixelgraphik.

Da ein img-Element von (X)HTML kein Hintergrundbild ist, sind
solche Methoden natürlich inhaltlich fragwürdig und nach meinen
Versuchen gibt es da bei browsern wie dem MSIE auch gern mal
technische Probleme …

[quote=“hoffmann”]Da ein img-Element von (X)HTML kein Hintergrundbild ist, sind
solche Methoden natürlich inhaltlich fragwürdig und nach meinen
Versuchen gibt es da bei browsern wie dem MSIE auch gern mal
technische Probleme …[/quote]

Das ist richtig. Barrierefrei dürfte das auch nicht sein. Wenn man sich die Seite vorlesen lässt bekommt man dann den alt oder title tag vorgelesen (den ich der Einfachheit halber oben weggelassen hab, was für valides (x)html aber natürlich notwendig ist) und da steht dann vlt Hintergrundbild oder sowas drin.

Aber eine valide, überall funktionierende Methode für ein sich anpassendes Hintergrundbild ist mir (bis auf CSS3) noch nicht untergekommen.
Wär froh wenn jemand eine zur Hand hätte.

Gruß, Markus

Für rein dekorative Bilder setzt man alt="" und zeigt damit an,
daß die inhaltlich belanglos sind.
Ohne alt gibt es hingegen Probleme, weil dann nicht bekannt ist,
ob oder wofür das Bild relevant ist.

Insofern kann man da schon img verwenden, am besten dann
mit den Attribute width und height auf 1 gesetzt (0 ist schlecht,
das kann auch wieder zu Problemen führen). Die Attribute
überschreibt man dann mit CSS.

Ich habe das vor Jahren schon untersucht - gibt da immer wieder
diese oder jene Probleme (kann man auf meiner Seite nachlesen).

Bei jedem browser wird es schon deshalb nicht funktionieren, weil
es CSS ist und man da vor allem einen Bezug vom Anzeigebereich
zur Bildgröße herstellen muß, was prinzipiell in CSS für (X)HTML
problematisch ist. Bei SVG hingegen nicht, aber das kann auch
nicht jedes Programm als Hintergrundbild interpretieren.
CSS3 ist auch noch nicht zur durchgehenden Implementierung
geeignet, was für bereits veröffentlichte Versionen ohnehin
belanglos wäre. Insofern kann man sich darauf verlassen, daß
es für sowas keine Methode gibt die ‘überall’ funktioniert ;o)
SVG ist so konzipiert, daß es das Problem zusammen mit CSS2
sauber lösen kann, samt Angaben zum Aspektverhältnis.
Und wenn man nicht akzeptieren kann, daß dann eben ältere
browser statt des SVG nur die Hintergrundfarbe anzeigen, so gibt
es eben keine saubere Lösung. CSS2 hat auch keine Möglichkeit,
bei Bildern Alternativformate anzugeben (ist auch für CSS3
angedacht), insofern kommt man da mit improvisieren auch nicht
weit.

Mir raucht der Kopf. Sind Begriffe, von denen habe ich noch nie was gehört.

Aber es gibt doch Seiten, wo ein komplettes Bild im Hintergrund ist? Oder täusche ich mich da auch schon??

Im Prinzip geht es mir eigentlich "nur " um die Farbe im Hintergrund. Mir gefallen Farbverläufe so gut. Aber das geht mit den Hex-Codes nicht, oder doch?

Ich hätte gerne so einen Hintergrund. Das ist jetzt in einem Bildbearbeitungsprogramm erstellt und als jpg gespeichert. Klar, so kann es nicht sein, aber irgendwie vielleicht doch???

in der Regel tut es sich besser wenn man fürs design png statt jpeg benutzt, da jpeg verlustbehaftet ist und oft hässlige “schlierer” enthält.

Die gezeigte Grafik ist vom prinzip her ja ziemlich simpel. Ein einfacher Farbverlaufe von oben nach unten. Betrachtet man es von Links nach rechts so verändert sich ja so ziemlich gar nichts. Soll heißen, es ist immer die selbe Farbe auf der selben höhe.
Aus diesem Grund würde es sich, zumindest in diesem Fall, besser eignen, wenn man nur eine wenige Pixel breite (reicht sogar ein einzelnes Pixel), und die entsprechende Höhe beibehält. Nutzt man es nun als Hintergrundbild, formatiert man es in CSS, in dem man beschreibt man möchte es auf der Horizontalen (repeat-x) Achse wiederholen.

mfg Balmung

Bei so einem einfachen Bildtyp muß sich die Größe des Bildes ja
nicht an die des Anzeigebereiches anpassen, da reicht CSS2 mit
Wiederholung in x-Richtung aus.
Wenn der Inhalt nach unten übersteht, empfiehlt es sich
da, die Hintergrundfarbe entsprechend der Farbe am unteren
Rand des Bildes zu notieren.

Reicht das hingegen nicht aus und soll der Farbverlauf wirklich
von oben nach ganz unten reichen, hat man wieder das Problem
der Anpassung, die bereits diskutiert wurde, bleibt einem dann
nicht erspart. Allerdings ist das Aspektverhältnis belanglos.

Hingegen bei einem Farbverlauf, bei dem oben und unten (und
links und rechts) dieselbe Farbe notiert ist, kann man das Bild in
x- und y-Richtung wiederholen lassen und vermeidet wiederum
Anpassungsprobleme.

gibt es eigntl eine funktion, bei dem man einem unterforum ein spezielles hintergrundbild geben kann? z.b. unterforum anno hat ein bild von diesem spiel oder bei fußball z.b. herthalogo, oder buli-logo usw?

Angewendet auf (X)HTML oder XML kann man jedem Element
per CSS ein Hintergrundbild zuordnen.

Individuelle Elemente werden ja einen Fragmentidentifizierer
haben. Das kann man dann in CSS verwenden, um dem Element
einen individuellen Hintergrund zuzuordnen.

Sinngemäß:

#fragment{background: blue, url(Bild_fuer_fragment.png); color: red}
#anderesFragment{background: blue, url(Bild_fuer_anderesFragment.png); color: red}

öhm, das was ihr schreibt ist ja die startseite…die hab ich ja mit photoshop gemacht, aba ich meine das gar net, ich meine wenn man im forum is, hat man mehrere unterforen wie “clan”, “spiele” usw…und dass man z.b. im unterforum “anno” intern ein hintergrundbild von dem spiel macht.

Müsstest du wohl mal im phpBB Forum nachfragen, hier biwst du wohl falsch

Aber was hoffman dir gesagt hat ist ja völlig richtig.

Dass das geht, bezweifle ich. Du kannst aber in der Forenbeschreibung Bilder einfügen. Inwiefern das auch auf Unterforen zutrifft, kann ich nicht sagen.

Da müßte man den Quelltext der Ausgabe genau angucken, ob
für solch ein Unterforum ein umschließendes Element mit einem
Identifizierer oder Klasse vorhanden ist oder ein Attribut mit
bestimmtem Wert, der sonst nicht vorkommt.
Dann kann man in der vermutlich doch für das Forum
vorhandenen CSS-Datei mit einen geeigneten Selektor
Eigenschaften angeben, welche nur auf dies Element oder dessen
Kinder wirken. ‘Stromaufwärts’ kann man in CSS nicht selektieren.
Wenn da also rein gar keine Struktur zu finden ist, die
charakteristisch ist, muß man wohl das Skript so modifizieren, daß
eine solche Struktur, am einfachsten ein Identifizierer dazukommt.

Die Leute, die an dem Forum herumbasteln, werden da sicher die
besseren Ansprechpartner dafür sein, wie man das Skript
modifiziert, wenn das notwendig sein sollte.

Die hohe Kunst der Stilvorlagenerstellung ist es allerdings, das
nur mit geeigneten Selektoren ohne Änderung des Dokumentes
zu erreichen (siehe etwa Zen-Garden…)