Hintergrundgrößen

Anonym · 7. November 2019 um 02:16

Servus.

Hat jemand eine Idee, wie und wo man schnell und bequem abelesen kann, welche Größe (in Pixeln oder cm) ein Bild haben muss, damit es als Hintergrund eingesetzt werden kann und genau die richtigen Maße hat, d.h., nicht gespiegelt zu wird?
Danke im Voraus.

MfG,
COB

Christian_Fischer_e4db17 · 7. November 2019 um 02:16

Hallo,

Hat jemand eine Idee, wie und wo man schnell und bequem
abelesen kann, welche Größe (in Pixeln oder cm) ein Bild haben
muss, damit es als Hintergrund eingesetzt werden kann und
genau die richtigen Maße hat, d.h., nicht gespiegelt zu wird?

was denn fuer ein Hintergrund?
Wo willst Du das Bild denn einsetzen? Du muesstest doch selbst am besten Wissen, wie gross ein Bild fuer Deinen Einsatzzweck sein mus…

Ich glaub, ich versteh Dich nicht so ganz…

Christian

Anonym · 7. November 2019 um 02:16

Ich glaub, ich versteh Dich nicht so ganz…

Christian

Glaub’ ich auch
Vielleicht habe ich mich nicht verständlich genug ausgedrückt. Gesetzt diesen Fall möchte ich es hiermit nachholen:

Ich möchte mit einem Bild als Hintergrundgrafik arbeiten. Dazu habe ich einen bestimmten Bereich, der von diesem Hintergrund eingenommen werden soll. In meinem Fall beispielsweise eine ganz normale Seite (ohne scollen) im Browserfenster. Es muss da allerdings eine vordefinierte Größe geben, welche das Bild besitzen muss, damit es genau diese eine Fläche ausfüllt, denn sonst wird sie standardmäßig dort ergänzt und reproduziert, wo ihr noch Fläche fehlt, um die vordefinierte Fläche auszufüllen (klingt kompliziert, ich weiß).

Christian_Fischer_e4db17 · 7. November 2019 um 02:16

Hallo,

Ich möchte mit einem Bild als Hintergrundgrafik arbeiten. Dazu
habe ich einen bestimmten Bereich, der von diesem Hintergrund
eingenommen werden soll. In meinem Fall beispielsweise eine
ganz normale Seite (ohne scollen) im Browserfenster.

definiere bitte ‚normale Seite‘.
Meine Aufloesung ist 1280x960, dafuer habe ich links im Mozilla eine Sidebar eingeblendet.
Auf meinem Laptop habe ich 1024x768.

Mein Buerokollege hat 1600x 1200 oder so.
Aber nie seine Browser Fullscreen laufen.

Wer ist denn jetzt normal?

Es muss
da allerdings eine vordefinierte Größe geben, welche das Bild
besitzen muss, damit es genau diese eine Fläche ausfüllt, denn
sonst wird sie standardmäßig dort ergänzt und reproduziert, wo
ihr noch Fläche fehlt, um die vordefinierte Fläche auszufüllen

Tja…
Wenn Du die Probleme, die sich aus den Ausfuehrungen oben ergeben umgehen willst, musst Du dem Besucher eine Fenstergroese aufzwingen.
Zwingen ist nie gut - hier auch nicht.
Mein Mozilla zB nimmt Befehle zur Fenstergroessenveraenderung einfach nicht an.
PopUps zeigt er auch meist nicht.

Also:
Mach Dir einen Bereich in dem Deine Seite angezeigt werden soll, setze ihn mit einem div-Container in eine html Seite und gib dem div ein Hintergrundbild.
Aus Gruenden der Abwaertskompatibilitaet wuerde ich bei ca 800x400 Pixeln bleiben.

Greetinx
Christian

Desian_689246 · 7. November 2019 um 02:17

Hi,

vielleicht hilft das etwas:
Um zu verhindern, dass sich das Bild wiederholt kannst du einen StyleSheet definieren: background-repeat:Wert;
Für Wert einen der folgenden Werte notieren.
repeat = wiederholen (Voreinstellung).
repeat-x = nur „eine Zeile lang“ waagerecht wiederholen.
repeat-y = nur „eine Spalte lang“ senkrecht wiederholen.
no-repeat = nicht wiederholen, nur als Einzelbild anzeigen.

is aus SelfHTML

cu Desian

Saltarella · 7. November 2019 um 02:18

vielleicht hilft das etwas:
Um zu verhindern, dass sich das Bild wiederholt kannst du
einen StyleSheet definieren: background-repeat:Wert;
Für Wert einen der folgenden Werte notieren.
repeat = wiederholen (Voreinstellung).
repeat-x = nur „eine Zeile lang“ waagerecht wiederholen.
repeat-y = nur „eine Spalte lang“ senkrecht wiederholen.
no-repeat = nicht wiederholen, nur als Einzelbild anzeigen.

Hi,
ich habe das selbe Problem mit meiner Seite und habe das ausprobiert und aus irgendeinem Grund funktioniert es bei mir nicht? Darum folgende Fragen:

Wo schreibe ich mein Hintergrundbild hin? In den normalen -tag oder ins style sheet?
sieht der befehl für no-repeat dann so aus: { background-repeat:no-repeat; }
oder so:background-repeat:no-repeat?
oder ganz anders?
Ich hab beides versucht und irgendwie gehts nicht.
Vielleicht könnt ihr mir helfen?
Danke Heike

Desian_689246 · 7. November 2019 um 02:18

Hi,

kommt drauf an, welches HTML du benutzt. Als erste Zeile einer HTML-Seite sollte etwas in der richtung stehen:

oder:

Bei ‚Transitional‘ ist mehr erlaubt. ‚Strict‘ ist ein neuerer Standart.

Also zum eigendlichen:
Bei beiden funktioniert:

meinWasserZeichen
\<!--
#mybody
{
 background:url([path]/[image]);
 background-repeat:no-repeat;
}
--\>

cu Desian

Schnoof · 7. November 2019 um 02:18

Erstelle das Hintergrundbild am besten in einer Größe etwa 800*400 Pixel. Vielleicht etwas kleiner, falls Du Scrollbalken brauchst. Probier es bei Dir aus, wie es am besten aussieht, wenn Du die Auflösung Deines Monitors auf 800*600 stellst. Und dann definiere eine Hintergrundfarbe, die gut zum Bild paßt für die höheren Auflösungen.

Du kannst das gut per CSS machen. Wenn Du eh schon eine Format-Datei angelegt hast, mußt Du das mit reinschreiben:

body {background-color:Wert;
 background-image:frowning:url)URI;
 background-repeat:no-repeat;}

Wenn Du es direkt in der HTML-Datei setzen willst, dann etweder wie bereits beschrieben oder so:

Der Colorwert kann hexadezimal oder in RGB-Werten angegeben werden (also #ffffff oder rgb(100%,100%,100%) für weiß). URI ist der Pfad Deines Bildes. Falls Deine Seite gescrollt werden muß, kannst Du das Bild fixieren. D.h. nur der Text auf dem Bild wird gescrollt, aber das Bild bleibt fest auf dem Monitor zu sehen. Dazu füge noch folgendes ein:

 background-attachment:fixed

falls es fixiert sein soll oder

 background-attachment:scroll

falls es mitscrollen soll.

Wenn Du noch mehr wissen willst, ist http://selfhtml.teamone.de ein guter Ansprechpartner.

Bis denne!
Schnoof

Anonym · 7. November 2019 um 02:19

Irgedwas mache ich falsch. Jedenfalls fabriziert der eigegebene Code mir lediglich ein kurzes weißes Rechteck dort, wo mein Hintergrund eigentlich sein sollte, bevor es dann auch dort zappenduster wird

Bitte noch ein letztes Mal für Doofe, Desian:
Wie genau lautet die Syntax (in Einzelschritten)?

Gruß, COB.

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Anonym · 7. November 2019 um 02:20

Können wir das ganze vielleicht nochmal an einem Beispiel festmachen?
Ich habe bis jetzt geschrieben:

[ein bisschen blabla]
Beispielseite

Wie müsste der Abschnitt im Body-Bereich jetzt genau heißen, wenn ich das Bild unter dem Link „www.beispiel.org/beispiel.jpg“ als no-repeat-Hintergrund einbauen möchte?

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Schnoof · 7. November 2019 um 02:20

Du kannst das gut per CSS machen. Wenn Du eh schon eine
Format-Datei angelegt hast, mußt Du das mit reinschreiben:

body {background-color:Wert;
background-image:frowning:url)URI;
background-repeat:no-repeat;}

Wenn Du es direkt in der
HTML-Datei setzen willst, dann etweder wie bereits beschrieben
oder so:

Der Colorwert kann hexadezimal oder in RGB-Werten angegeben
werden (also #ffffff oder rgb(100%,100%,100%) für weiß). URI
ist der Pfad Deines Bildes. Falls Deine Seite gescrollt werden
muß, kannst Du das Bild fixieren. D.h. nur der Text auf dem
Bild wird gescrollt, aber das Bild bleibt fest auf dem Monitor
zu sehen. Dazu füge noch folgendes ein:

background-attachment:fixed

falls es fixiert
sein soll oder

background-attachment:scroll

falls es
mitscrollen soll.

Wenn Du noch mehr wissen willst, ist
http://selfhtml.teamone.de ein guter
Ansprechpartner.

Bis denne!
Schnoof

Können wir das ganze vielleicht nochmal an einem Beispiel
festmachen?
Ich habe bis jetzt geschrieben:

[ein bisschen blabla]
Beispielseite

Wie müsste der Abschnitt im Body-Bereich jetzt genau heißen,
wenn ich das Bild unter dem Link
„www.beispiel.org/beispiel.jpg“ als no-repeat-Hintergrund
einbauen möchte?

Du bindest das ganze völlig falsch ein. ;o)

Du erstellst eine Datei dateiname.css. Dort legst Du alle Formate fest. Und alle in der Form

tagname {attribut1:wert; attribut2:wert; attribut3:wert; ...;}

Im Header aller HTML-Dateien, in denen Du diese Formate verwenden möchtest, schreibst Du folgende Zeile:

Dann brauchst Du nur noch zu schreiben und der Browser formatiert den Body der HTML-Datei wie in der CSS-Datei beschrieben.

Schau Dir wirklich mal bei http://selfhtml.teamone.de die Kurzreferenz für CSS an. Dann kennst Du zumindest alle möglichen Attribute. Für welche Tags welches Attribut einen Sinn macht, findest Du sicher selbst raus.

Wenn Du die Formate für jede Seite extra definieren willst, dann definiere besser keine extra CSS-Datei, sondern lege die Formate direkt in der HTML-Seite fest. Also

Bis denne!
Schnoof

Desian_689246 · 7. November 2019 um 02:20

Hi,

OK. Also:
Mach ein Verzeichnis ‚test‘.
Kopiere ein Bild mit der Endung ‚.jpg‘ hinein und nenne es ‚bg.jpg‘.
Lege eine Datei an ‚bg.html‘.
Öffne ‚bg.html‘ mit einem Texteditor.
Kopiere diesen SourceCode in die ‚bg.html‘:

 meinEinzelnensHintergrundblid
\<!--
#mybody
{
 background:url(bg.jpg);
 background-repeat:no-repeat;
}
--\>

Hier habe ich ein Festes Hintergrundbild ein einziges Mal angezeigt.

Speichere die Datei ‚bg.html‘.
Öffne die Datei ‚bg.html‘ mit einem Browser.
Jetzt bestaune das einmalig angezeigte Hintergrundbild und speichere das Wissen darum irgendwo in deinem Unterbewustsein, auf das es bei bedarf ans Tageslicht kommen möge.

cu Desian
PS: Immer wieder gerne. Wer fragt bekommt Sympatiepluspunkte…

Schnoof · 7. November 2019 um 02:20

Sorry,
ich sehe gerade, ich habe mich vertan.

url(URI) muß es heißen. Hab die Klammern falsch gesetzt.

Anonym · 7. November 2019 um 02:21

Ich nutze dieses Dilettanten-Frontpage2000, denn um alles zu lernen und jede Zeile von Hand coden habe ich momentan leider keine Zeit.
Daher keine CSS-Style-Datei sondern Referenz zu meiner Index-Seite.

Anonym · 7. November 2019 um 02:21

Dann will ich mir doch gleich mal ein paar Sympathipunkte extra holen

background:url(bg.jpg);

Eben die genau Syntax war mir unklar.
Angenommen, bg.jpg liegt auf „http://ichkriegsnichtgebacken.gov/Bilder“ . Müsste die obige Code-Zeile dann heißen:

background:http://ichkriegsnichtgebacken.gov/Bilder(bg.jpg) ?

Dürfte sie nicht, denn so funzt’s definitiv nicht.

Schnoof · 7. November 2019 um 02:21

Nein, das url ist nur die Beschreibung, in welcher Form der Pfad geliefert wird.

Also, wenn Deine Seite auf der Domain www.child-of-bodom.de liegt und das Bild zusammen mit den Seiten im selben Ordner liegt, sieht es wie folgt aus:
background-image:url(bg.jpg)

Wenn es in einem untergeordneten Ordner ‚images‘ liegt, dann so:
background-image:url(images/bg.jpg)

Wenn es auf einer ganz anderen Domain zu finden ist (z.B. www.dingsbums.de), dann sieht’s so aus:
background-image:url(http://www.dingsbums.de/bg.jpg)

Nun alles klar? ;o)
Warum schaust Du eigentlich nicht mal auf selfhtml.teamone.de ? Da ist es wirklich super beschrieben. Der Herr Münz hat es wirklich idiotensicher gemacht.

Bis denne!
Schnoof

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

Anonym · 7. November 2019 um 02:21

Nun alles klar? ;o)
Warum schaust Du eigentlich nicht mal auf
selfhtml.teamone.de? Da ist es wirklich
super beschrieben. Der Herr Münz hat es wirklich idiotensicher
gemacht.

Zur ersten Frage: Ja, finally
Zur zweiten: Werde ich zukünftig machen.

Vielen Dank nochmal für die (zugegeben etwas erschwerte) Erklärung. Bei mir braucht das immer ein bisschen

Gruß, COB