PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Hintergrundbild soll sich beim runterscrollen nicht wiederholen

Red Scorpion
2008-01-15, 20:20:18
Hallo

Ich möchte für eine Webseite ein grosses Hintergrundbild an die Grundlinie stellen wo es dann permanent fixiert bleibt und es sich beim runterscrollen der Seite nicht wiederholt.

Habe mal gelesen, dass sowas mit 'background image=no-repeat' funktionieren soll.

Wer kennt den vollständigen Code dazu?

Danke.
Blade II
2008-01-15, 20:49:51
<body style="background-image: url(images/bild.gif);
background-attachment:fixed;">

Seiteninhalt ...

</body>
http://www.css4you.de/background-attachment.html

<div style="background-image: url(images/bild.gif);
background-repeat:no-repeat">
Hintergrundbild nicht wiederholen
</div>

http://www.css4you.de/background-repeat.html
Red Scorpion
2008-01-15, 21:22:20
Leider wiederholt sich das Bild noch immer. Es ist nicht an die Grundlinie fixiert.

Ich möchte, dass das Hintergrundbild permanent auf der Grundlinie sitzt.
Blade II
2008-01-15, 21:39:34
Versuch mal:
background-position: bottom
wollev45
2008-01-16, 08:17:10
background-image: url(images/back.jpg);
backgroud-repeat: no-repeat;
background-attachment: fixed;


So hab ich es in unserem Forum eingestellt, geht bestens....
darph
2008-01-16, 09:14:45
Allerdings gehört die Pfadangabe in Anführungszeichen.
rotalever
2008-01-16, 16:35:25
Solche Backgrounds nerven, da diese Seiten auf manchen Systemen ruckeln.
DanMan
2008-01-16, 19:17:20
Solche Backgrounds nerven, da diese Seiten auf manchen Systemen ruckeln.
Nicht, wenn man JPGs verwendet. Klingt doof, ist aber so.
rotalever
2008-01-16, 19:34:33
Nicht, wenn man JPGs verwendet. Klingt doof, ist aber so.
Wie jetzt? Ist das ernst gemeint? OMG wenn das wirklich so ist, dann weiß ich auch nicht mehr weiter :biggrin:

Aber so feststehende Divs (menüs, etc.) lassen bei mir immer die gesamte Seite ruckeln. Und da sind ja noch nichtmal Bilder sondern nur Text drin.

---
Also das mit JPG stimmt nicht. Hab grad PNG und JPG verglichen. Beides ruckelt, dadrüber hatte ich nur paar Textabsätze. Ohne die Bilder ist alles perfekt.

@darph: Außerdem kommen für die Bildurl gar keine Anführungszeichen. Wenn man die macht, geht das nämlich nicht mehr.
DanMan
2008-01-16, 23:36:15
Wie jetzt? Ist das ernst gemeint? OMG wenn das wirklich so ist, dann weiß ich auch nicht mehr weiter :biggrin:

Aber so feststehende Divs (menüs, etc.) lassen bei mir immer die gesamte Seite ruckeln. Und da sind ja noch nichtmal Bilder sondern nur Text drin.

---
Also das mit JPG stimmt nicht. Hab grad PNG und JPG verglichen. Beides ruckelt, dadrüber hatte ich nur paar Textabsätze. Ohne die Bilder ist alles perfekt.

@darph: Außerdem kommen für die Bildurl gar keine Anführungszeichen. Wenn man die macht, geht das nämlich nicht mehr.
Das hier sagt was anderes: http://jove.prohosting.com/~l3ert/Fixed/

JPGs und Bitmaps machen fast nie Probleme, alle anderen unter Umständen schon. Hier in Firefox und Opera macht nur Test5 Probleme beim scrollen. Es geht hier nicht um feststehende Divs, die vielleicht auch noch einen feststehenden BG haben.

Stammt aus dem Firefox Bugtracker: https://bugzilla.mozilla.org/show_bug.cgi?id=90198#c125
rotalever
2008-01-17, 16:42:07
Ist ja schön was da steht. Fakt ist, dass auch JPG ruckelt. Das habe ich nicht durch Theorie rausgefunden, sondern durch einen simplen Praxistest ;)
JPG ist vll. ein bisschen schneller, aber es ruckelt. Das liegt einfach daran, dass die Rendering Engine von FF lahm ist...
darph
2008-01-17, 21:53:03
@darph: Außerdem kommen für die Bildurl gar keine Anführungszeichen. Wenn man die macht, geht das nämlich nicht mehr.
CSS 2.1 Spezifikation:



The '@import' rule allows users to import style rules from other style sheets. Any @import rules must precede all other rules (except the @charset rule, if present). The '@import' keyword must be followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it.

Example(s):

The following lines are equivalent in meaning and illustrate both '@import' syntaxes (one with "url()" and one with a bare string):

@import "mystyle.css";
@import url("mystyle.css");

So that user agents can avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media types after the URI.

Example(s):

The following rules illustrate how @import rules can be made media-dependent:

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
[…]


Value: <uri> | none | inherit
Initial: none
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: absolute URI or none

This property sets the background image of an element. When setting a background image, authors should also specify a background color that will be used when the image is unavailable. When the image is available, it is rendered on top of the background color. (Thus, the color is visible in the transparent parts of the image).

Values for this property are either <uri>, to specify the image, or 'none', when no image is used.

Example(s):

body { background-image: url("marble.png") }
p { background-image: none }
rotalever
2008-01-18, 15:29:51
Hmm.. seltsam.. Hab grad überlegt, warum es bei mir dann nicht mit Anführungsstrichen ging: Es lag daran, dass ich bei der Datei zu Testzwecken für das Hintergrundbild das CSS inlined hatte und dann Anführungsstriche genommen hab :redface: Deshalb hatte der Editor das dann plötzlich in so einer anderen Farbe gezeigt ;)