• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Bild in der Mitte zentrieren?

A

albert

Neues Mitglied
Versuche schon seit geraumer Zeit ein Bild in der Mitte meiner Seite zu plazieren. Habe zu diesem Zweck folgenden Stil erstelllt, mit dem das Bild in der Mitte von body in den Hintergrund befördert werden soll. Das Bild landet aber immer an der oberen Kante und ist zur Hälfte durchgeschnitten? Was mache ich falsch?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--

body {
background-image: url(DSC00010.bmp);
background-repeat: no-repeat;
background-position: center center;
}
-->
</style></head>

<body>
</body>
</html>
P.S.: Jetzt habe ich auch noch Eingabeschwierigkeiten auf Eurer Seite. Die Titelzeile ist zusammengeschrumpft(truncated). Die eingegebenen Buchstaben sind nicht leserlich?
 
Ich verstehe Dich nicht ganz. Es handelt sich doch um einen Stil, der immer zwischen <head> und </head> eingegeben werden muss? Damit steht er doch auch zwischen <html> und </html>. Habe den Code übrigens mit dem dreamweaver erstellt.
 
Er meinte die Code-Tags hier im Forum. Du solltest HTML-Quelltext mit dem <>-Button kennzeichnen.

Zum Problem:
Wenn du ein Bild einfügen möchtest und dieses Teil des Inhalts ist, dann nutzt du den <img>-Tag, wenn du einen Hintergrund einfügen möchtest und es Teil des Designs ist, dann nutzt du die background-Eigenschaft in CSS.
Bild oder Hintergrund?
 
Also ich will einfach ein Bild in der Mitte(horizontal wie vertikal) des Bidschirms platzieren. Wenn ich das img-tag nehme, dann finde ich keine Einstellung, mit der ich das Bild in dieser Weise platzieren kann. So weit ich sehe, müsste ich mühsam die gewünschten Abstände im browser ablesen und eingeben. Deswegen bin ich auf die Idee gekommen, mein Bild in die Mitte des Hintergrundes -aber als Teil desselben- zu stellen, weil css für den Hintergrund die Eigenschaft center, center zur Verfügung stellt.Wie dem auch sei, vielleicht kann mir einfach jemand den Code hinschreiben, mit dem ich ein Bild in die Mitte des Bildschirms stellen kann. Ich danke im voraus für Eure Geduld.
 
aJunkie schrieb:
Ja, sorry. Meinte es hier im Forum, der Übersichtlichkeit wegen.

Hast du es mit margin: 0; und text-align: center; versucht?
Zum Vergrößern anklicken....
Dein Beitrag hat sich mit meinem überschnitten. text-align:center hab ich versucht, bringt aber nur horizontal das Bild in die Mitte. Den zweiten Teil Deines Vorschlages hab ich noch nicht getestet.
 
Das Ganze als Hintergrundbild zu zentrieren sollte damit gehen:

Code: 
html, body { height: 100%; }
body {
    background-image: url(DSC00010.bmp);
    background-repeat: no-repeat;
    background-position: center center;
}

Ich würde btw. kein Bitmap für sowas verwenden. Im Web sind GIF, JPEG oder PNG üblich.
 
Danke threadi, das hat es tatsächlich gebracht.
Verstehen tu ich es trotzdem nicht. Warum dem html-tag überhaupt ein stil (height) zuordnen?
 
Trotzdem hätte ich noch eine Nachfrage:
Ich habe gelesen, dass man das Problem folgendermaßen lösen könnte:
1) Ein div einfügen und in das div das Bild einfügen.
2) Eine Klasse erstellen und diese Klasse dann dem div- container zuordnen.
Leider enthält das schlaue Buch keinen Hinweis, welche Eigenschaften in der class die Zentrierung bewirken sollen? Für etwas Nachhilfe wäre ich dankbar.
 
Warum suchst du einen workaround, wenn du doch schon eine Lösung hast?
 
Weil ich am Lernen bin. Und behalten kann man nur etwas, das man verstanden hat. Wenn ich ein Bild in einen container zentral einfügen will(diesmal nicht als Hintergrund), müsste es dafür doch eine einfache Lösung geben?
 
Ja, absolute Positionierung des Bildes.
Code: 
.bild{
  position: absolute;
  width: 400px; // Breite
  height: 400px; // Höhe
  left: 50%;
  top: 50%;
  margin-left: -200px; // Hälfte der Breite des Bildes in Pixel negativiert
  margin-top: -200px; // Hälfte der Höhe des Bildes in Pixel negativiert
}
[Hierbei hat das Bild die Klasse "bild"]
 
Zuletzt bearbeitet:
Die Werte müssen natürlich an das Bild angepasst werde, ausserdem müssen die left und top Eigenschaften vorhanden sein, wenn du das bild in der mitte haben möchtest.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben