wo liegt mein fehler?

von **cssanu** » 19.04.2010, 17:25

Hallo

Es geht um die Positionierung eines Hintergrundbilds für ein div. Ich möchte das div zentrieren und das Hintergrundbild in dem div oben rechts und nur einmal erscheinen lassen. Das scheint nicht möglich zu sein, jedenfalls orientiert sich das Bild im Beispiel nicht am div, sondern am body.
Wo liegt mein Denkfehler?
Mit freundlichen Grüssen

html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css" media="screen, projection">
@import url(beispiel.css);
</style>
</head>
<body>
<div class="all">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
</div>
</body>
</html>

beispiel.css:
body {
margin: 0;
padding: 0;
background-color: black;
font-family: verdana, arial,helvetica,sans-serif;
}
div {
margin: 0;
padding: 0;
}
.all {
margin: auto;
width: 1000px;
background-color: yellow;
background-image: url(bild.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top right;
}

von **cssanu** » 20.04.2010, 17:58

Hallo

Hm, das scheint doch eigentlich ein wenig ungewöhnliches Problem zu sein, oder?
Ich hab's mal verlinkt, vielleicht wird ja so klarer, um was es mir geht:
http://www.lafourmi.ch/test/
Bin für jeden Hinweis dankbar...

von **Laus** » 20.04.2010, 18:45

Ich weiß ja nicht mit was für einem Browser Du dieses Problem hast, aber im FF und im IE8 wird das Hintergrundbild wie von dir gewünscht angezeigt.

von **cssanu** » 20.04.2010, 21:35

Hallo Laus

Weil es bei mir so aussieht:
http://www.lafourmi.ch/test/test-screenshot.jpg
und zwar in allen aktuellen Browsern unter win 7 unabhängig davon, ob ich die Seite online oder offline lade. woran kann das liegen?

von **Laus** » 20.04.2010, 22:59

Nimm background-attachment: fixed; raus dann dürfte es auch bei deiner Auflösung funktionieren.

von **cssanu** » 21.04.2010, 11:26

Schon richtig, allerdings soll das Hintergrundbild ja fixiert sein.
Wieso ist denn die Positionierung auflösungsabhängig?
Und: Woher rührt der obere Abstand des div? Laut css sollte dort doch keiner sein, oder?

von **Laus** » 22.04.2010, 11:13

Wieso ist denn die Positionierung auflösungsabhängig?

Sie ist nicht direkt Auflösungsabhängig, aber, die Angabe über die Position "background-position" des Hintergrundbildes ist eigentlich relativ zur oberen linken Ecke des Elementes. Wenn aber "background-attachment" auf "fixed" geändert wird, verändert sich grundlegend die Positionierung des Hintergrundbildes. Es wir dann die linke obere Ecke des Anzeigebereiches für die Positionsangabe verwendet und nicht mehr wie gewohnt die Ecke des betreffenden Elements. Analog dazu in deinem Fall eben die Rechte Ecke. Dadurch verschiebt sich das Bild mit veränderter Auflösung.

Woher rührt der obere Abstand des div? Laut css sollte dort doch keiner sein, oder?

Du verwendest

Code: Alles auswählen: body {margin: 0; padding: 0;}

Dadurch werden die Browser-vorgaben aber nicht geändert. Verwende stattdessen einen sogenannten Prolog um damit alle Werte auf 0 zu setzen, und definiere die Abstände explizit bei den jeweiligen Elementen.

Code: Alles auswählen: *{margin:0;padding:0;}

von **cssanu** » 22.04.2010, 18:15

Verstehe, so geht es also nicht. Liesse sich denn meine Absicht auf andere Weise realisieren?
Also: ein zentriertes div mit einem fixierten Bild rechts oben (im div).

von **Laus** » 23.04.2010, 06:34

Der einzige weg der mir jetzt spontan einfällt wäre die Seite flexibel zu gestalten, das heißt das sich die Breite dem jeweiligem Viewport anpasst. Eventuell dem Div ein margin in Prozent geben dann ist es immer zentriert und das fixe Bild beim scrollen auch immer da wo es sein soll. Ich hoffe ich habe dein Anliegen jetzt richtig verstanden.

von **cssanu** » 23.04.2010, 23:06

Leider nein, da es um ein div mit einer fixen Breite von 1000px geht.
Aber wenn das nicht möglich ist, muss ich mir halt etwas anderes einfallen lassen.
Jedenfalls vielen Dank soweit.

wo liegt mein fehler?

wo liegt mein fehler?

Re: wo liegt mein fehler?

Re: wo liegt mein fehler?

Re: wo liegt mein fehler?

Re: wo liegt mein fehler?

Re: wo liegt mein fehler?

Re: wo liegt mein fehler?

Re: wo liegt mein fehler?

Re: wo liegt mein fehler?

Re: wo liegt mein fehler?

Ähnliche Beiträge zu "wo liegt mein fehler?"

Wer ist online?