Website Bild optimieren

@Daaron
Die Höhe muss eigtl. nur angegeben werden wenn das height Attribut im img-Element auftritt.
http://jsbin.com/axutob/2/edit

@TE
Daaron hat es doch in seinen Posts genau erläutert.
 
siazz schrieb:
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.
Auch in einem Forum wirst du genau meine Antworten erhalten. Warum? Weil sie absolut korrekt sind. Hintergründe lädt man nicht in ein <img>-Element sondern per CSS Background. Einzige Ausnahme wären Slider...
Und auch die Freundlichkeit wirst du woanders nicht anders erleben. Ist der übliche Umgangston unter IT'lern.

palace4d schrieb:
Die Höhe muss eigtl. nur angegeben werden wenn das height Attribut im img-Element auftritt.
...aber genau diese Attribute sollte man immer angeben. <img> ohne Breite und Höhe erhöht die Render-Zeit der Seite signifikant. Ohne Größenangabe muss das gesamte Dokument neu geparsed werden, nachdem das Bild vom Server geladen wurde, da erst dann die Ausdehnung des Bildes bekannt ist und somit erst dann abschließend geklärt werden kann, was wohin floatet und wie hoch welche Box ist.
height&width wegzulassen ist mit das ineffizienteste, das man tun kann. Schlimmer ist bald nur @import...
 
@omaliesschen

Na ja es kommt halt immer darauf an wie man in den Wald ruft. Vor allem als Anfänger. Wenn ich gleich schreibe ich habe mir kein Tutorial etc. durchgelesen ist es klar das die Antworten entsprechen Kurz und knapp sind. Wenn aber wirklich ein Problem da ist wird einem auch hier ohne Probleme geholfen :)
 
...zumal ne Googlesuche nach "html hintergrund vollbild" bei mir als 2. Ergebnis http://css-tricks.com/perfect-full-page-background-image/ ausspuckt.

So gesehen ist es sogar noch überaus nett und zuvorkommend, dass der TE überhaupt eine Antwort abseits von "lmgtfy.com" erhalten hat. Wir sind hier kein Kindergarten, in dem man jeden Zonk an die Hand nehmen muss und ihm sein Breichen vorkaut.
 
Na, ihr seid mir so Experten.

Siazz, alle Tipps hier kannst du in die Tonne werfen und in selfhtml brauchst du dich auch nicht einlesen (was für ein Quatsch!), pass mal auf, das ist ganz einfach.
Du willst ein Hintergrundbild auf deiner website haben, welches sich automatisch an jede Bildschirm- bzw. Browsergröße anpasst, ohne beschnitten zu werden.
Richtig? Nichts einfacher als das.
Ich habe zwei Anhänge beigefügt.
In Expression Web öffnest du eine neue HTML Seite, dann siehst du folgenden Code wie in Anhang 1.
In Anhang 2 siehst du das, was du einfügen musst, und WO du das einfügen musst, nämlich das hier, und zwar zwischen "title" und "/head":



<style type="text/css">


body {
background-image: url(deinBild.jpg);
background-size: cover;
}
</style>





Dein Bild muss nicht unbedingt ein .jpg sein, kann auch .png sein oder ähnliches.
Wähle es groß genug, sodass es auch auf großen Bildschirmen vollständig dargestellt wird, z.B. 1920x1080.

Das machst du jetzt mal und fertig ist die Kiste.

ew.jpgew1.jpg
 
Zuletzt bearbeitet:
Cool Master schrieb:
Na ja es kommt halt immer darauf an wie man in den Wald ruft. Vor allem als Anfänger.

Da geb ich dir im Prinzip Recht, aber wenn ich Seite 1 so durchlese muss ich DIESMAL leider sagen: Der TE ist zu Recht gegangen, ...
 
@Puppad: Fehlschlag... Lies mal meinen Post auf der ersten Seite. SO sieht der CSS-Code richtig aus. Du hast z.B. kein no-repeat drin, das geht komplett schief sobald die Seite höher als dein Bild ist. Aus dem selben Grund braucht es noch das fixed. Aber gratuliere... du hast evtl. gerade was gelernt.

Außerdem gehört sich so etwas nun einmal nicht in den HTML-Code sondern in ein separates Stylesheet.
 
puppad!!!!! Danke!!!! Genau das hab ich gebraucht ich wusste nie wo und an welcher Stelle ich das reinschreiben muss und vorallem was, jetzt FUNKTIONIERT ES ENDLICH DANKE!!!
Ich könnte dich knuddeln!!!:):):)


Nachtrag für Daaron: nichts geht komplett schief, ich hab mal interesshalber ein kleineres Bild ausprobiert und siehe da ... es geht auch, nur wird es nicht mehr ganz so scharf dargestellt, ist ja logisch wenn der Schirm größer ist. Deshalb hat puppad ja wohl auch gesagt ich soll ein großes bild nehmen.

Und warum gehört es nicht in einen HTML-Code? Es funktioniert doch!
Aber trotzdem danke für deinen Versuch einer Hilfestellung, so konntest du auch etwas dazu lernen :lol:
 
Zuletzt bearbeitet:
Wenn deine Seite mal etwas mehr Inhalt hat und somit scollt, wirst du merken, warum Puppads Code eben unvollständig ist und wie extrem schief das alles geht.

Und so etwas gehört nicht in den HTML-Code, weil:
1.) Wenn du 10 Unterseiten hast, müsstest du 10 Dokumente bearbeiten, nur um das Bild überall zu ändern.
2.) Ladezeiten, Cache-Optimierung, Trennung von Inhalt und Layout... sprich: elementare Grundlagen der Webentwicklung

Und wenn du eben bereits daran scheiterst, etwas CSS-Code als solchen zu erkennen und zu wissen, wohin du damit musst, dann solltest du halt wirklich erst einmal ein paar Grundlagen lernen, eben z.B. indem du selfHTML liest.
 
Daaron, kannst du lesen?
"Nur ein Hintergrundbild, mehr soll in die website nicht rein" habe ich geschrieben.
Und puppad hat mir dafür die einfachste und verständlichste und genau beschriebene Lösung präsentiert.
Warum soll ich selfhtml lernen? Brauch ich doch gar nicht, das interessiert mich überhaupt nicht.
Weißt du, ich bin im Kunsthandel, und wenn eine Kundin zu mir kommt und fragt: "Liebe Frau ..., könnten Sie bitte eine Beurteilung dieses Objektes vornehmen?" ... Dann sage ich: "Aber selbstverständlich doch" ... und sage der Kundin nicht, dass Sie gefälligst ein Semester Kunstgeschichte studieren soll.
Also was ist los, wo ist dein Problem?
 
Zuletzt bearbeitet:
Sein Problem ist ganz einfach. Du willst es nicht verstehen. Ich habe keine Ahnung was Daaron beruflich macht, sprich ob er Web Entwickler ist oder nicht, aber ich bin es und kann dir sagen das der Code von puppad, genau wie Daaron schreib, voll in die Hose gehen wird wie schon geschrieben wurde inkl. Begründung.

Ich denke du stimmst mir/uns zu wenn man etwas macht sollte man es richtig machen und 100% geben (außer beim Blutspenden ;) ) das bedeutet nun mal das man sich ein wenig mit der Materie auseinander setzt und genau dagegen wehst du dich so vehement dagegen das es echt kein Spaß macht dir noch weitere Tipps zu geben.

Um bei deinem beispiel zu bleiben wenn du eine Beurteilung vornimmst schaust du das Bild ja auch nicht nur 5 Sekunden und von hinten an und sagst eine Zahl zwischen 0 und 50 Millionen oder?
 
siazz schrieb:
Daaron, kannst du lesen?
Weit besser als du, wie mir scheint... sonst hättest du meine Begründung GELESEN und vor allem VERSTANDEN.

"Nur ein Hintergrundbild, mehr soll in die website nicht rein" habe ich geschrieben.
Und puppad hat mir dafür die einfachste und verständlichste und genau beschriebene Lösung präsentiert.
Nochmal: Der Code ist nicht FALSCH, er ist nur UNVOLLSTÄNDIG. Den Grund kannst du oben nachlesen, wenn du mal von deinem Trip runter bist und bereit bist, hier tatsächlich was zu lernen und zu leisten.

Aber hey: Probier es aus. Geh auf http://www.loremipsum.de und lass dir so 40-50 Absätze erzeugen. Diesen Text fügst du in deine Webseite im Contentbereich ein, das dürfte dann länger sein als eine Bildschirmhöhe. Dazu verwendest du Puppads unvollständigen CSS-Code.... Evtl. raffst du dann, was das Problem ist.
Evtl. müssen Kunsthändler alles erst sehen, bevor sie es glauben und verstehen. Ich bin Webentwickler, ich schau mir Code an und hab danach ne gute Vorstellung davon, wie es "in der Wirklichkeit" aussehen wird.

Warum soll ich selfhtml lernen? Brauch ich doch gar nicht, das interessiert mich überhaupt nicht.
Wenn du hier offensichtlich eine Webseite SELBST erstellen oder bearbeiten willst, brauchst du es sehr wohl.

Weißt du, ich bin im Kunsthandel, und wenn eine Kundin zu mir kommt und fragt: "Liebe Frau ..., könnten Sie bitte eine Beurteilung dieses Objektes vornehmen?" ... Dann sage ich: "Aber selbstverständlich doch" ... und sage der Kundin nicht, dass Sie gefälligst ein Semester Kunstgeschichte studieren soll.
Wenn die Kundin von dir keine Beurteilung will sondern wissen will, wie sie SELBST eine Beurteilung vor nimmt und was wichtige Kriterien sind, wirst du ihr dann die gesamte Kunstgeschichte haarklein erzählen? Sicher nicht. Du wirst ihr bestenfalls erklären, welche Fachbücher zu dem Thema nützlich wären.

Du bist nicht mein KUNDE. Du bezahlst mich nicht, also kriegst du auch nicht alles haarklein vorgekaut. Willst du scheinbar ja auch nicht. Du bist jemand, der ein Problem SELBST lösen will und nur etwas Hilfe benötigt.
Damit dir aber geholfen werden kann, und zwar fachgerecht, musst du ein gewisses Maß an Basiswissen mitbringen. Dieses Basiswissen geht aber eben über "ich poste was in ein Forum" hinaus. Wenn dir hier mehrfach von Profis geraten wird, dich etwas mit der Materie zu beschäftigen, damit du das Problem und somit auch den Lösungsansatz verstehst, dann solltest du das evtl. auch tun.

Ansonsten solltest du mal wirklich KUNDE werden. Gib mir deine komplette Projektbeschreibung. Verhandel mit mir über einen Preis. Wenn wir uns einig werden kriegst du am Ende eine 100% fachgerechte Lösung.
 
Tja, was soll man dazu sagen.

Ich sitze hier vor meinem 1920x1080 Bildschirm und es funktioniert.
Meine Kollegin hat einen 1440x900 Bildschirm und es funktioniert auch.

Und jetzt kommts: wenn ich das einfüge, was du mir vorschlägst, also mit fixed und center center no-repeat, dann habe ich einen weißen Bildschirm.

Ein gutes Beispiel dafür, dass die Praxis die Theorie widerlegt.
Wie wäre es denn, wenn ihr es mal ausprobieren würdet? Oder ist es eher so, dass nicht sein darf, was nicht sein kann?
Lassen wir das also, regt euch nicht weiter auf, nehmt einfach zur Kenntnis, dass es funktioniert.
Ich wünsche euch allen einen schönen Tag.
 
Zuletzt bearbeitet:
siazz schrieb:
Und jetzt kommts: wenn ich das einfüge, was du mir vorschlägst, also mit fixed und center center no-repeat, dann habe ich einen weißen Bildschirm.

Weil du zu 99% etwas falsch gemacht hast, da du dich ja nicht mit CSS bzw. HTML auseinander setzen möchtest...

siazz schrieb:
Ein gutes Beispiel dafür, dass die Praxis die Theorie widerlegt.

Nein CSS und HTML ist keine Theorie sondern schwarz auf weiß ob etwas geht oder nicht. Ein Browser kann auch einiges selber ergänzen aber da vertraue ich nicht drauf, weil es im nächsten Update einfach wieder weg sein kann.

siazz schrieb:
Lassen wir das also, regt euch nicht weiter auf, nehmt einfach zur Kenntnis, dass es funktioniert.

Und wieder der Beweis das du nicht lesen willst. Wir schrieben ja das es gehen wird aber es ist eben nicht 100% komplett...
 
Cool Master schrieb:
Wir schrieben ja das es gehen wird aber es ist eben nicht 100% komplett...

Ach so, weiter oben habt ihr noch geschrieben, dass "das alles extrem schief geht und voll in die Hose."

Macht euch nichts draus, auch ihr könnt nicht alles wissen.
 
siazz schrieb:
Ich sitze hier vor meinem 1920x1080 Bildschirm und es funktioniert.
Meine Kollegin hat einen 1440x900 Bildschirm und es funktioniert auch.
Logisch... Weil dein Seiteninhalt auf <= 1080px passt... Wenn dein Seiteninhalt aber jetzt meinetwegen 1200px hoch wäre und du somit scrollen müsstest -> FEHLSCHLAG

Und jetzt kommts: wenn ich das einfüge, was du mir vorschlägst, also mit fixed und center center no-repeat, dann habe ich einen weißen Bildschirm.
Dann hast du Mumpitz geschrieben.

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

Geht garantiert, da ich diese Technik in mehreren Seiten verwendet habe. Manchmal sieht "center top" besser aus, manchmal "center center" oder eben "center bottom". Erster Wert ist die X-Achse, 2. die Y-Achse. Es wären sogar Grafiken denkbar, die meinetwegen mit "left top" am besten aussehen.

Ein gutes Beispiel dafür, dass die Praxis die Theorie widerlegt.
Wie wäre es denn, wenn ihr es mal ausprobieren würdet? Oder ist es eher so, dass nicht sein darf, was nicht sein kann?
Nimm zur Kenntnis, dass du einfach nicht sauber gearbeitet hast und dass du hier mit professionellen Webentwicklern redest.

Weder HTML noch CSS sind irgendwelche düsteren Theorien, die nur in geheimen Labors funktionieren. Das sind globale STANDARDS, an die sich die meisten Browser (huhu @ IE<8) halten. Wie sich die CSS-Deklarationen genau verhalten kannst du direkt beim W3C nachlesen. Wenn es sich im Browser anders verhält als wie vom W3C beschrieben, dann ist der Browser fehlerhaft.

Also lies am besten mal nach, was z.B: das "fixed" machen soll oder wozu "no-repeat" gut ist. Dir wird ein Licht aufgehen...
 
Und wie ist dann zu erklären, dass die Bildgröße von 1950x1080 auf dem kleinen Monitor (1440x900) meiner Kollegin vollständig angezeigt wird?
 
Und jetzt kommts: wenn ich das einfüge, was du mir vorschlägst, also mit fixed und center center no-repeat, dann habe ich einen weißen Bildschirm.

Das liegt daran, dass du nicht den Code von puppad nehmen solltest, sondern den richtigen Code von Daaron...
Wenn du puppad's Code verwendest, dann mag das auf den ersten Blick funktionieren, aber eben nur dann. Das Bild wird in Wirklichkeit verzerrt und bei anderen Auflösungen sieht es schei*e aus. Das weiße Bild kommt daher, dass du background-attachment: fixed nicht zusammen mit background-image verwenden darst. Dann klappt das logischerweise nicht, sondern du musst das background-Attribut verwenden. Einfach mal zuhören, was die Profis sagen... Und nur, weil es bei deiner Kollegin klappt, muss es nicht auf zig anderen Computern genauso gut aussehen.
 
Aha, danke.

Nachtrag: kurz ausprobiert mit allen Browsern, wenn ich bei background: url("...") "center center" oder "center top" oder "center bottom" anfüge, dann erhalte ich in Opera einen weißen Streifen links, verzichte ich darauf und füge nur no-repeat an, dann klappt es in allen Browsern.
 
Zuletzt bearbeitet:
Zurück
Oben