Page 1 of 2

Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Thu Jul 29, 2010 2:01 pm
by keltoi
Huhu, ich bin's schon wieder.

Vermutlich bin ich nur zu dämlich, die SuFu zu verwenden, aber ich komme mit meinen HTML-"Kenntnissen" hier nicht weiter.
Ich habe für meinen Blog nun ein Hintergrundbild gebastelt, das auf 100% Breite gestreckt und so fixiert werden soll, dass alles andere darauf herum scrollt.

Bei einer normalen HTML-Site hätte ich also irgendwas mit img width="100%" und bgproperties="fixed" geschrieben,...
Ich fürchte, die Forumssoftware lässt mich das nicht machen. Wenn ich das im Stylesheet an der Stelle versuche, wo ich die URL für's Hintergrundbild angebe, kommt gar kein Hintergrundbild. Kann ich denn an irgend einer anderen Stelle festlegen, wie der Hintergrund behandelt werden soll?

Liebe Grüße und sorry wegen der blöden Fragen, ich hab echt keine Ahnung, aber davon ne Menge ;)
Keltoi

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Thu Jul 29, 2010 4:10 pm
by yellowled
keltoi wrote:Ich habe für meinen Blog nun ein Hintergrundbild gebastelt, das auf 100% Breite gestreckt und so fixiert werden soll, dass alles andere darauf herum scrollt.
Sowas? http://css-tricks.com/perfect-full-page ... und-image/ (Falls nicht habe ich keine Ahnung, was Du meinst.)
keltoi wrote:Bei einer normalen HTML-Site hätte ich also irgendwas mit img width="100%" und bgproperties="fixed" geschrieben,...
Vergessen. Ganz schnell vergessen. Gammelcode.

YL

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Thu Jul 29, 2010 6:45 pm
by keltoi
Ja, ich denke, das ist genau das, was ich brauche.
Den HTML-Teil steck ich dann in welche Datei? Index.php? Content.tpl?
Ich kenn mich, wie gesagt, wirklich nicht gut aus, kann nur ein paar (uralte und, wie Du so richtig festgestellt hast, gammelige) HTML-Befehle bei den ganzen verschachtelten Dateien im Blog krieg ich nen Knoten im Gehirn und das Handbuch hab ich nichtmal zu einem Zehntel durchgearbeitet, weil ich das Gefühl hab, meine Synapsen schmurgeln an, wenn ich zu viel auf einmal lese...
Ich hab mir grade noch ein Buch über CSS gekauft und hoffe, alles wird dann klarer...

Jedenfalls vielen Dank für den Link, ich werd es einfach mal versuchen... Darf ich, wenn ich damit nicht allein weiter komme, hier nochmal um Hilfe anklopfen? Ist mir ja echt schon peinlich, aber ich find das s9y-Konzept so klasse und ich hab mich ja bewusst NICHT für WP entschieden. Nun brauch ich aber eben noch ne Menge Starthilfe und ich hoffe, ich geh Euch nicht auf die Nerven mit meiner Fragerei :oops:

Liebe Grüße und Bussi aus München
Keltoi

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Thu Jul 29, 2010 8:02 pm
by onli
So arg schlimm verschachtelt ist das gar nicht. Der HTML-Teil gehört wahrscheinlich in die äußerste Schale, und damit in die index.tpl, der CSS-Teil in die style.css deines Templates.

Um Fragen zu stellen ist das Forum da ;)
Gruß

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Thu Jul 29, 2010 8:21 pm
by keltoi
Hmmm, ich hab's versucht... mit dem schönen Erfolg, dass nun ALLES fixiert ist und sich GARNIX mehr scrollen lässt :roll: Ich glaub, das üb ich noch :mrgreen:

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Thu Jul 29, 2010 8:44 pm
by onli
Ja, das scheint der Code auch so zu wollen. Soweit ich das sehe ist das Code, um eine komplette Seite mit einem Bild zu füllen und dann dort was anzuzeigen - aber ohne scrollen.

Du willst doch eigentlich nur ein festes Hintergrundbild für die gesamte Seite, oder? http://www.w3schools.com/Css/pr_backgro ... chment.asp sollte dann ausreichen, also

Code: Select all

body {
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
Evtl kombinierst du das noch mit http://www.w3.org/TR/css3-background/#t ... round-size:

Code: Select all

background-size: 100%;
Das könnten halt nur moderne Browser.
Gruß

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Sat Jul 31, 2010 11:58 am
by keltoi
Also fixiert ist das Bild jetzt, aber es ist nicht gedehnt.
Wird das Bild nur ggf. verkleinert, falls es größer wäre als die x Pixel des Browserfensters/Bildschirms?
Vergrößert wird es jedenfalls nicht. Aber immerhin ist es jetzt fixiert und nicht mehr gekachelt.

Trotzdem vielen Dank :)

Liebe Grüße
keltoi

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Sat Jul 31, 2010 12:52 pm
by yellowled
keltoi wrote:Wird das Bild nur ggf. verkleinert, falls es größer wäre als die x Pixel des Browserfensters/Bildschirms?
Nö. Das kann CSS nicht ohne Tricks.
keltoi wrote:Vergrößert wird es jedenfalls nicht. Aber immerhin ist es jetzt fixiert und nicht mehr gekachelt.
Es würde sehr helfen, wenn Du mal eine URL angeben würdest, damit man sich mal live angucken kann, was Du da jetzt überhaupt womit wie gemacht hast. Aber generell ist das, was Du (nehme ich an) möchtest, mit schnödem Standard-CSS nicht zu machen.

Eine Alternative wäre z.B., ein Hintergrundbild zu wählen, das in jedem Fall erheblich größer als der Viewport (Browserfenster minus Bedienelemente) ist, in dem aber die „wesentlichen Bildinhalte“ in gängigen Auflösungen zu sehen ist. Es dürfte allerdings performance-mäßig schwierig werden, so ein Monsterbild immer und überall zu laden.

YL

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Sat Jul 31, 2010 12:58 pm
by onli
Nö. Das kann CSS nicht ohne Tricks.
Hast du dir background-size angeguckt? Oder verpasse ich, worum es geht? :)

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Sat Jul 31, 2010 2:48 pm
by keltoi
Huhu,

sorry, meine Antwort eben war tatsächlich etwas uneindeutig.

Onli, den von Dir geposteten Code habe ich verwendet und sowohl mit background-size 100%; als auch mit dem auf der von Dir verlinkten Seite vorgeschlagenen 50% auto; - Einstellung (ich dachte, das Bild ist eh hochkantformat und mir kommt es auf die linke und rechte Seite an, da wäre das nicht schlecht, wenn es, wie auf der w3org-Seite beschrieben, dann so gestreckt würde, dass es genau zweimal nebeneinander passt... Funktionieren tut es nur leider nicht.

Die URL zum Bild: http://blog.keltoi-online.de/templates/ ... img/bg.jpg
Der Blog ist entsprechend zu finden auf http://blog.keltoi-online.de

So wie es jetzt ist, ist es fast gut, nur sollte eben rechts neben dem Inhalt nicht die Hintergrundfarbe rausgucken sondern eben der rechte Bildrand.

Dann habe ich statt background-repeat:no-repeat; das Ganze auf repeat-x gesetzt, was natürlich dazu führt, dass das Hintergrundbild in der x-Achse gekachelt ist, aber es hat weiterhin 100% Bildgröße
Damit sieht es natürlich bei jedem Browserfenster anders aus...

Ich hab da noch grade eine andere Idee: Kann ich links und rechts neben dem Inhalts-Wrapper noch jeweils einen fixierten Bereich definieren? Da könnte ich dann in den linken Kasten die linke Hälfte des Hintergrundbildes und in den rechten die rechte Hälfte rein kopieren. Die Bordüre soll auf jeden Fall zu sehen sein und ein Teil der silbernen Rose links bzw. der Blüte rechts sollte auch noch mit drauf sein.
Idealerweise sollte die Größe des Bildes auf 100% der Kastenbreite skaliert sein und zwar unabhängig davon, ob ich mit einem riesigen Monitor oder einem Netbook auf die Seite gehe. Ist das überhaupt möglich?

Das absolute I-Dipferl wäre dann, wenn der Bannerbereich und die Linkleiste unter dem Banner (wo bisher nur Impressum steht, das soll aber noch erweitert werden) ebenfalls fixiert wären und lediglich der Inhalt mitscrollen würde.

Liebe Grüße
Keltoi

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Sat Jul 31, 2010 3:25 pm
by yellowled
onli wrote:
Nö. Das kann CSS nicht ohne Tricks.
Hast du dir background-size angeguckt? Oder verpasse ich, worum es geht? :)
Nee, aber „kann CSS“ kann ich in diesem Fall nicht gelten lassen -- das funktioniert derzeit, wenn ich es richtig sehe, nur mit vendor-prefixes und in meinem Firefox gar nicht. Alltagstauglich geht irgendwie anders :)

YL

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Sat Jul 31, 2010 3:44 pm
by yellowled
Entschuldigung, aber ich für meinen Teil kann Deinen Ausführungen immer noch nicht folgen. Daher mal ein paar grundsätzliche Anmerkungen.
keltoi wrote:So wie es jetzt ist, ist es fast gut, nur sollte eben rechts neben dem Inhalt nicht die Hintergrundfarbe rausgucken sondern eben der rechte Bildrand.
Dann setz die Hintergrundfarbe in dem Bereich auf "transparent". Ganz einfach :)
keltoi wrote:Damit sieht es natürlich bei jedem Browserfenster anders aus...
Webseiten sind keine Gemälde - speziell bei „experimentellen“ CSS-Eigenschaften wie dieser (die, wie oben erwähnt, meiner Einsicht nach derzeit (wenn überhaupt) ohnehin nur mit den sogenannten Vendor-Präfixen funktioniert, musst Du damit rechnen, dass die Unterstützung, sagen wir mal, sporadisch ist. Hinzu kommt die Problematik der unterschiedlichen Bildschirmauflösungen, speziell hier, wo das Layout, soweit ich das überblicke, zumindest teilweise flexibel ist.
keltoi wrote:Idealerweise sollte die Größe des Bildes auf 100% der Kastenbreite skaliert sein und zwar unabhängig davon, ob ich mit einem riesigen Monitor oder einem Netbook auf die Seite gehe. Ist das überhaupt möglich?
Interessante Zusatzfrage: Ist das überhaupt sinnvoll?

Du hast hier ein Bild von 800 Pixeln Breite als JPG, also in einem (nicht mal verlustfrei) komprimierten Grafikformat. Nimm die Grafik mal in ein Grafikprogramm und skaliere sie da auf 1600 Pixel Breite (heutzutage noch nicht mal sonderlich viel) -- das dürfte schon ziemlich pixelig aussehen. Hinzu kommt: Das #wrapper-div hat bei Dir eine Breite von 75% -- das bedeutet im Prinzip, dass immer 3/4 des Bildes vom Inhaltcontainer verdeckt werden. Ich finde so einer Hintergrundtapete in diesem Fall ziemlich sinnfrei ...
keltoi wrote:Das absolute I-Dipferl wäre dann, wenn der Bannerbereich und die Linkleiste unter dem Banner (wo bisher nur Impressum steht, das soll aber noch erweitert werden) ebenfalls fixiert wären und lediglich der Inhalt mitscrollen würde.
Dafür ist position:fixed; da.

YL

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Sat Jul 31, 2010 5:20 pm
by keltoi
Huhu,

ich glaub, wir reden immernoch aneinander vorbei.
Das Ganze soll natürlich kein Gemälde werden. Ich hätte einfach gern statt eines einfarbigen Hintergrundes rechts und links eine "Bordüre" - da ich als Background meines Wissens nach keine zwei verschiedenen Bilder nehmen und eins links und das andere rechtsbündig reinsetzen, musste ich also irgend ein Bild nehmen, das in der Mitte mit "irgendwas" gefüllt ist, denn mir kommt es nur auf die Ränder an.

Dass rechts die Hintergrundfarbe zu sehen war und links das Bild, lag nicht an der fehlenden Transparenz - das Hintergrundbild liegt ja ÜBER der Hintergrundfarbe. Es lag schlicht daran, dass ich es nicht wiederholt hatte und es nach, wie Du so richtig bemerkt hast, 800 Pixeln zu Ende war.
Ich hatte das Bild ursprünglich wesentlich größer, hatte aber da das Problem, dass es ZU groß war - die Bordüre lag schon jenseits des Browserfensters. Daher hatte ich dann die Idee, es deutlich zu verkleinern, dem Browser zu sagen, er soll es auf 50% der Fensterbreite stauchen und dann zweimal nebeneinander zu setzen. Das hätte den Vorteil, dass die mir wichtigen Bildelemente tatsächlich schön zu sehen wären!

Damit, dass Webseiten keine Gemälde sind, hast du natürlich recht. Aber wenn Layout wurscht wäre, bräuchte man sich die ganze Arbeit mit CSS nicht machen: Einfach Text auf ne Seite klatschen, irgendwo zwischendrin ein Bild reinfriemeln und der Rest ist Wurscht. - Warum macht man sich dann überhaupt die Mühe, einen Blog zu gestalten? Ich für meinen Teil hatte mich aus zwei Gründen entschlossen, von meiner ollen HTML-Homepage weg zu kommen: 1. wollte ich etwas haben, was sich schnell aktualisieren lässt und wo ich Bilder komfortabel hoch laden kann und 2. sind Framesets und/oder Tabellelnayouts aus der Mode gekommen - beides hatte ich auf meiner alten Homepage als Gestaltungselement verwendet. Mit Frameset war es halt noch einfach: drei Seiten nebeneinander, im Mainframe den Inhalt und in den beiden Randframes eine Hintergrundgrafik im "Gammelcode", der vielleicht nicht schön nicht zeitgemäß und möglicherweise wirklich nicht den aktuellsten Vorgaben entspricht... ABER: Es hat wenigstens funktioniert und zu dem Ergebnis geführt, was ich mir als Layout vorgestellt hatte.

Ich weiß jetzt auch nicht, wie ich mein Anliegen noch vorbrigen kann. Aber stell Dir einfach vor, ich würde links neben dem Inhaltsfenster das Bild einer senkrecht stehenden Weinflasche haben wollen und rechts das einer Bierflasche. Wie kann ich das bewerkstelligen? Ich will keine halbe Weinflasche und auch nicht eine Weinflasche, eine halbe Bierflasche und auf der anderen Seite eine halbe Weinflasche und eine ganze Bierflasche. Ich kann natürlich, damit es in MEINEM Browser, auf MEINEM Monitor so aussieht, das Ganze ausmessen, hab dann meinetwegen 1000 Pixel Viewport und mach mir nen Hintergrundbild von 1000 Pixeln wo die ersten 100 Pixel Weinflasche sind und die letzten 100 Pixel Bierflasche. Die mittleren 800 Pixel lass ich frei, weil das eh vom Seiteninhalt verdeckt wird (und das ist auch gut so ;) )
Bei mir würde das toll aussehen, aber jemand, der einen Viewport von nur 800 Pixeln hat, sieht dann rechts eben KEINE Bierflasche sondern den Mittelteil der Grafik.

Der Rest der Seite kann doch auch prozentual zum Viewport angegeben werden! Der Inhalt schrumpft einfach in der Breite, die linke und rechte Navileiste wird geschrumpft... Warum Ist es dann nicht möglich, dem Bild zu sagen: Du darfst nur 50% des Viewports ausfüllen und kachel Dich in der x-Achse. Damit brauch ich keine 2000 Pixel breite Grafik, für die mich Modembenutzer lynchen würden, sondern ich kann eine kleine Grafik benutzen, deren linker rand am linken Bildschirmrand zu sehen ist und deren rechter Rand am rechten Bildschirmrand erscheint. Das kann doch nicht unmöglich sein?

Liebe und hoffentlich nun etwas weniger wirre Grüße
Keltoi

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Sat Jul 31, 2010 6:43 pm
by yellowled
keltoi wrote:da ich als Background meines Wissens nach keine zwei verschiedenen Bilder nehmen und eins links und das andere rechtsbündig reinsetzen
Noch nicht: http://www.css3.info/preview/multiple-backgrounds/
keltoi wrote:Damit, dass Webseiten keine Gemälde sind, hast du natürlich recht. Aber wenn Layout wurscht wäre, bräuchte man sich die ganze Arbeit mit CSS nicht machen
Das eine hat ja nichts mit dem anderen zu tun.

Tatsache ist, es gibt verschiedene Formen von Layouts, genauer: Verschiedene Maßeinheiten, die für Layouts genutzt werden -- feste oder flexible Breiten, elastische Layouts auf Basis der eingestellten Schriftgröße, mittlerweile adaptive Layouts, welche die konkrete Bildschirmauflösung abfragen usw. Dazu gibt es Unmengen von verschiedenen Bildschirmauflösungen und zig verschiedene Browser.

Der Satz „Webseiten sind keine Gemälde“ illustriert lediglich, dass ein auf feste Dimensionen ausgelegtes Layout im Web normalerweise scheitern wird -- man kann und darf nicht annehmen, dass ein und dasselbe Layout in einem Safari auf einem Mac mit einem monströsen Cinema-Display "genauso aussieht" wie auf einem Mobiltelefon mit einem 320x240 Pixel-"Bildschirm".
keltoi wrote:"Gammelcode", der vielleicht nicht schön nicht zeitgemäß und möglicherweise wirklich nicht den aktuellsten Vorgaben entspricht... ABER: Es hat wenigstens funktioniert und zu dem Ergebnis geführt, was ich mir als Layout vorgestellt hatte.
Es gibt zig mehr Gründe, weshalb Tabellenlayouts und Framesets nicht mehr verwendet werden sollten. Zugänglichkeit, Barrierefreiheit und Suchmaschinenfreundlichkeit sind nur drei davon. (Sorry, aber das würde jetzt zu weit führen.)
keltoi wrote:Aber stell Dir einfach vor, ich würde links neben dem Inhaltsfenster das Bild einer senkrecht stehenden Weinflasche haben wollen und rechts das einer Bierflasche. Wie kann ich das bewerkstelligen?
Ohne das jetzt konkret durchgespielt zu haben: Du weist das Bild der Weinflasche body als Hintergrundbild zu -- links ausgerichtet und nahezu beliebig vertikal positioniert ohne repeat. Dann "wickelst" Du den Inhaltscontainer in ein weiteres wrapper-div ein, dem Du die Bierflasche als Hintergrundbild zuweist -- rechts ausgerichtet, ansonsten wie oben.

Das Problem bleibt aber, dass Du dafür sorgen musst, dass links und rechts vom Container genug Rand ist, damit die Bilder sichtbar bleiben. Da skalierende Hintergrundbilder derzeit bestenfalls ansatzweise von Browsern unterstützt werden, wäre die einzige Möglichkeit, die ich derzeit sehe (immer vorausgesetzt, dass ich verstehe, was Du erreichen willst :wink:), dass diese Bilder -- abhängig vom tatsächlichen Viewport -- über ein Skript dynamisch generiert werden.
keltoi wrote:Warum Ist es dann nicht möglich, dem Bild zu sagen: Du darfst nur 50% des Viewports ausfüllen und kachel Dich in der x-Achse.
Weil die CSS-Spezifikation, welche derzeit von gängigen Browsern unterstützt wird, dafür keine Anweisung bietet. Sieh Dir die Unterstützung für background-size an -- das deckt maximal einen Bruchteil der möglichen Browser, mit denen eine durchschnittliche Webseite besucht wird, ab.

YL

Re: Hintergrundbild auf 100% Breite bringen u. fixieren möglich?

Posted: Sat Jul 31, 2010 9:48 pm
by keltoi
yellowled wrote:Ohne das jetzt konkret durchgespielt zu haben: Du weist das Bild der Weinflasche body als Hintergrundbild zu -- links ausgerichtet und nahezu beliebig vertikal positioniert ohne repeat. Dann "wickelst" Du den Inhaltscontainer in ein weiteres wrapper-div ein, dem Du die Bierflasche als Hintergrundbild zuweist -- rechts ausgerichtet, ansonsten wie oben.
Das klingt einleuchtend. Und das innere Wrapper-Div kann ich mit rechtsbündigem Hintergrund ausstatten und mache es genauso groß wie den Hintergrund, also 100%? Und links ist es dann durchsichtig, wenn ich keine Hintergrundfarbe definiere?

Sorry, wenn ich so blöd frag, aber ich glaube, langsam sickert's zu mir durch :)