tag:forum.selfhtml.org,2005:/self Hintergrundbild - <textarea> fixed? – SELFHTML-Forum 2007-08-01T08:59:40Z https://forum.selfhtml.org/self/2007/aug/1/hintergrundbild-textarea-fixed/1151030#m1151030 Powl 2007-08-01T07:52:33Z 2007-08-01T07:52:33Z Hintergrundbild - <textarea> fixed? <p>Hallo,</p> <p>Folgendes Problem hat sich gezeigt, wenn ich versuche ein Hintergrundbild für Formularfelder einzubinden.<br> Doctype:</p> <pre><code class="block language-html"> <span class="token prolog"><?xml version="1.0" encoding="ISO-8859-1"?></span> <span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span> <span class="token name">PUBLIC</span> <span class="token string">"-//W3C//DTD XHTML 1.0 Strict//EN"</span> <span class="token string">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>http://www.w3.org/1999/xhtml<span class="token punctuation">"</span></span> <span class="token attr-name"><span class="token namespace">xml:</span>lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de-DE<span class="token punctuation">"</span></span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de-DE<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> <p>Dann kommt ein normales Formular. HTML Code ist valide!</p> <p>Bei folgendem CSS ist mir klar, dass man zusammenfassen kann, aber ich habe es zum Fehlersuchen ausführlich geschrieben.<br> Ausgangssituation:</p> <pre><code class="block language-css"> <span class="token selector">input, textarea</span> <span class="token punctuation">{</span> border<span class="token punctuation">:</span>1px solid #000<span class="token punctuation">;</span> background-color<span class="token punctuation">:</span>#FFF<span class="token punctuation">;</span> background-image<span class="token punctuation">:</span><span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>backgroundimage.gif<span class="token punctuation">)</span></span><span class="token punctuation">;</span> background-position<span class="token punctuation">:</span>top left<span class="token punctuation">;</span> background-repeat<span class="token punctuation">:</span>no-repeat<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Im FireFox ist es wunderbar. Im IE7 sieht es soweit auch unspektakulär aus. Befüllt man nun die Textarea, stellt man fest dass beim Scrollen im FF das Hintergrundbild nicht mitscrollt, im IE7 aber sehr wohl.<br> Also nichts böses weiter gedacht und folgendes hinzugefügt:</p> <pre><code class="block language-css"> <span class="token selector">textarea</span> <span class="token punctuation">{</span> background-attachment<span class="token punctuation">:</span>fixed<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Tatsächlich, wie erwartet scrollt das Hintergundbild nicht mehr mit...<br> es wird erst gar nicht mehr angezeigt!<br> Was angezeigt wird, ist eine Gedankenblase über meinem Haupt mit ganz vielen Fragezeichen drin.<br> Kann mir das jemand erklären?<br> Hat vielleicht jemand schon darum around geworkt und würde sein Wissen teilen?<br> Gibt es eine andere Möglichkeit, als ein extra div um das Textfeld zu setzen und dem das Hintergrundbild zuzuweisen?</p> <p>netten Tag<br> ^da Powl</p> <div class="signature">-- <br> ===============================<br> <a href="http://powl.hat-gar-keine-homepage.de/" rel="nofollow noopener noreferrer">powl.hat-gar-keine-homepage.de/</a> </div> https://forum.selfhtml.org/self/2007/aug/1/hintergrundbild-textarea-fixed/1151031#m1151031 Sven Rautenberg http://www.rtbg.de 2007-08-01T08:22:53Z 2007-08-01T08:22:53Z Hintergrundbild - <textarea> fixed? <p>Moin!</p> <blockquote> <p>Im FireFox ist es wunderbar. Im IE7 sieht es soweit auch unspektakulär aus. Befüllt man nun die Textarea, stellt man fest dass beim Scrollen im FF das Hintergrundbild nicht mitscrollt, im IE7 aber sehr wohl.<br> Also nichts böses weiter gedacht und folgendes hinzugefügt:</p> <pre><code class="block language-css"></code></pre> </blockquote> <blockquote> <p>textarea {<br>       background-attachment:fixed;<br>     }</p> </blockquote> <pre><code class="block"> > > Tatsächlich, wie erwartet scrollt das Hintergundbild nicht mehr mit... > es wird erst gar nicht mehr angezeigt! Die Eigenschaft "background-attachment" ändert laut CSS-Standard mehr als nur die "Befestigung". Nämlich auch die Relation. Ein scrollendes Hintergrundbild richtet sich (background-position) am Element aus, dem es zugewiesen ist, und scrollt mit diesem mit. Ein fixiertes Hintergrundbild dagegen richtet sich nach dem Viewport (Browserfenster) aus, und ist dadurch eventuell (wenn es nicht in alle Richtungen gekachelt wird) unsichtbar, wenn das Element, dem das Bild zugeordnet ist, sich nicht dort befindet, wo das Hintergrundbild erscheint. Siehe auch <http://www.w3.org/TR/CSS21/colors.html#propdef-background-attachment>.  - Sven Rautenberg -- "Love your nation - respect the others." </code></pre> https://forum.selfhtml.org/self/2007/aug/1/hintergrundbild-textarea-fixed/1151032#m1151032 Powl 2007-08-01T08:59:40Z 2007-08-01T08:59:40Z Hintergrundbild - <textarea> fixed? <p>Hallo,</p> <p>danke für deine Antwort. Dem entnehme ich, dass der FF standardkonform handelt, wenn er Hintergrundbilder in textarea-Elementen _nicht_ mitscrollt.<br> Wohingegen IE7 das nicht standardgemäß umsetzt. (Wieso wundert mich das nicht?)</p> <p>Durch das background-attachment wird die Relation der Positionierung vom Element weg auf den Viewport übertragen, so dass in den Elementen die Hintergrundbilder also nicht mehr angezeigt werden, richtig?</p> <p>Daraus schlussfolgere ich, dass es wirklich keine andere Möglichkeit zu geben scheint, als für den IE ein extra Element um textarea Elemente einzufügen, welches den Hintergrund trägt, um das mitskrollen zu vermeiden, ist das korrekt?</p> <p>Ich hab's befürchtet.</p> <p>deltree c:\programme\internet_explorer</p> <p>netten Tag<br> ^da Powl</p> <div class="signature">-- <br> ===============================<br> <a href="http://powl.hat-gar-keine-homepage.de/" rel="nofollow noopener noreferrer">powl.hat-gar-keine-homepage.de/</a> </div>