Website Bild optimieren

[siazz]

Hallo zusammen,
eine einfache Frage, auf die ich keine Erklärung erwarte, weil es vielleicht zu kompliziert ist, aber für einen link wäre ich dankbar, der mir das erklärt.
Für meine Homepage habe ich ein Bild erstellt, das bei mir den ganzen Bildschirm ausfüllt.
Wie muss ich das nun programmieren, dass das Bild auch auf kleineren Bildschirmen als Ganzes angezeigt wird, sich also auf jedem Bildschirm - egal welche Auflösung - gleich präsentiert?
Ich hoffe, ich habe mich verständlich ausgedrückt, danke für eure Hilfe.

Microsoft Expression Web 4
Win 7

 

[Madman1209]

Hi,

die Breite des Bildes festlegen, so dass immer der maximal verfügbare Raum genutzt wird. Bitte einfach "selfHTML" durcharbeiten und dort Tutorials machen. Das sind Grundlagen, die man beherrschen muss, bevor man irgendwo weiter denkt

VG,
Mad

 

[Gajel]

http://srobbin.com/jquery-plugins/backstretch/

eins von vielen plugins.

 

[siazz]

Danke!

 

[Cool Master]

Weiterer Tipp von einem Web Entwickler:

Schmeiß "Microsoft Expression Web 4" weg und schreib den Code selber.

1. lernt man dabei etwas
2. siehst du was passiert
3. kannst du es besser und schneller anpassen.

 

[siazz]

Danke, aber da verlangst du etwas viel von mir, ich bin blutiger Anfänger!

 

[Madman1209]

Hi,

gerade als Anfänger sollte man sich hinsetzen und die Grundlagen lernen. Je mehr die irgendwelche Plugins, Frameworks und Programme abnehmen desto weniger kannst du am Ende. Setz dich hin, mach die Tutorials über die Grundlagen durch und gut ist es.

VG,
Mad

 

[Cool Master]

Seh ich genau so wie Madman.

Sobald du die Grundlagen hast hast du eine Webseite innerhalb von 15 Min am laufen. Ja es ist nicht Klick hier und Klick da aber am ende vom Tag fährst du damit besser. Vor allem kannst du dich so von HTML zu CSS zu Javascript durch arbeiten

 

[Daaron]

Vollkommen gleich KANN sich das Bild nicht präsentieren. Relevant ist ja auch das Seitenverhältnis....

Und wer hier gleich wieder die JS-Keule schwingt sollte evtl. mal über Effizienz nachdenken:

background: url("/pfad/zum/bild.jpg") center center no-repeat;
background-attachment: fixed;
background-size: cover;

Fertig.

 

[palace4d]

Für Bilder im HTML:

img {
  max-width: 100%;
}

 

[Cool Master]

@palace4d

sehr gefährlich....

lieber dem Background eine ID vergeben (da es nur 1x vorkommt) und dort die CSS Anweisung rein schreiben.

 

[Daaron]

Das sind 2 vollkommen unterschiedliche Baustellen.
palace4d beschreibt hier eine leichte Methode, wie man <img> nahtlos nach unten skalieren lässt. Sehr nützlich für Responsive Layouts. Er hat dabei aber "height: auto;" vergessen. Das muss mit hin, sonst wirds Brühe...

Backgrounds ticken ganz anders als <img>. Die kann man nicht mit width (bzw. max-width) manipulieren. Dafür gibts eben background-size.

 

[siazz]

Leute, ihr verwirrt mich total, was soll ich nun machen bitte, danke.

 

[Madman1209]

Hi,

dich in die Grundlagen einlesen und Tutorials machen. Du lernst es nur so.

VG,
Mad

 

[siazz]

Ist ja okay, aber wenn ich hier lese, dass ihr euch ständig widersprecht, dann ... :-(

 

[Daaron]

Willst du ein Hintergrundbild, das sich automatisch in das Browserfenster einpasst?
Ist dir dabei zugegeben der IE <=8 egal? Dann nimm mein obiges background-size.
Ist dir der IE<=8 nicht egal? Schwing die JavaScript - Keule.

Willst du tatsächlich ein Bild, also einen <img>-Tag, verwenden, der sich trotzdem an der Breite des Elternelements ausrichtet? max-width:100%;height:auto;

 

[siazz]

Ja, ich will ein Hintergrundbild, das sich automatisch in das Browserfenster einpasst. Und zwar nur ein einziges, mehr soll in die website nicht rein.
Was heißt IE egal? Ich habe Opera, aber was die anderen für einen Browser haben, die meine Seite aufrufen, das weiß ich doch nicht.
Und ja, ich will einen <img>-Tag, verwenden.
Also einfach: max-width:100%;height:auto;?

 

[Daaron]

Hintergrundbilder kommen üblicherweise NICHT in <img>-Tags. Wozu auch?
1.) macht mehr Mühe
2.) kostet etwas mehr Bandbreite
3.) bringt die Semantik durcheinander
Für Hintergrundbilder gibt es CSS....

Und DU als Anbieter musst schon entscheiden, welche Browser (und somit welche Besucher) du noch voll unterstützt, welche ruhig ein klein wenig verbuggt sein können und welche vollkommen abkacken können, ohne dass es dich nicht tangiert.
Wenn du diese Entscheidung nicht treffen kannst, dann bist du in der Webentwicklung so deplaziert wie ein Feldscher im Einsatz, der aber keine Triage machen kann.

Ganz ehrlich: Lies dich erst einmal in den absoluten Urschleim der Webentwicklung ein...

 

[siazz]

Das Schlimmste, was einem Anfänger passieren kann, ist, dass er mehreren "Experten" gegenübersitzt, die nur Kauderwelsch reden, sich dabei widersprechen und auch noch unfreundlich sind.
Ich danke euch und werde mich schnellstens in ein anderes Forum verziehen.

 

[Cool Master]

Bevor wir hier noch weiter reden würde ich dir ernsthaft empfehlen bei selfHTML vorbeizuschauen.

Daaron hat es ja schon sehr gut aufgelistet. Wie gesagt schau dir Tutorials an damit du etwas über Semantik verstehst und welche Elemente für was benutzt werden.