Hintergrundbild zentrieren

html.de-Forum HTML, XHTML & CSS
1

Hallo,
ich habe ein Hintergrundbild erstellt, möchte dieses aber gerne zentrieren.
Wie funktioniert das?

Witschi

2

Mit background-position.

Hier findest du alles, was du über background wissen musst background: Hintergrundbilder: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

3

Danke, aber ich habe mein Problem doch schon anders gelöst, als ich gemerkt habe, das das, was ich habe nicht gut ist…

4

Und jetzt auf einmal, geht mein Hintergrund garnichtmehr…

body
{ 
background-image: url("h.jpg")
background-color: none;
background-repeat: repeat;
}
5

Hinter background-image fehlt ein Semikolon. Mehr kann man ohne das dazugehörige HTML nicht sagen.

6

… und nehme mal die Anführungszeichen raus. Das gibt manchmal Probleme.

7

Hab ich noch nie erlebt, dass die Anführungszeichen Probleme machen, hast du dafür mal ein Beispiel? Weil sogar in der Spezifikation des W3C wird der Pfad in Anführungszeichen geschrieben. Colors and backgrounds

8

Ich hatte es damals mit Anführührungszeichen gemacht. Bei einem Browser wurde es nicht angezeigt (weiss aber nicht mehr welcher). Vielleicht ist dieses auch nicht mehr relevant. Ist auch schon lange her. Ich versuche mal was rauszubekommen.

Ps: Wir hatten das Thema aber auch schon mal vor 2 Jahren. z.B. hier: http://www.html.de/html-und-xhtml/14117-bild-als-hintergrund.html

Edit: So ganz kann es aber nicht stimmen, den dieses geht bestimmt nicht:

<div style="background-image: url("bild.gif");"> :wink:

9

Okay, eure Anweisungen haben nicht funktioniert.
Hiermal das ganze script (meckert nicht an meine
!!)

<html>
<head>
<style type="text/css">
body
{ 
background-image; url("h.jpg")
background-color: none;
background-repeat: repeat;
}

img
{
border:none;
}
#navi
{
padding-left: 0px;
padding-top: 0px;
}

ul {
  border-width: thin;
  border-style: solid;
  border-color: orange;
  margin-top: 250px;
  margin-right: 700px;
  margin-bottom: 0px;
  margin-left: 0px;
  background: none;
}
h6 {
  border-width: thin;
  border-style: solid;
  border-color: orange;
  margin-top: -100px;
  margin-right: 200px;
  margin-bottom: 100px;
  margin-left: 200px;
  background: #FFFFFF;
}


</style>
<title>Sticktion</title>
</head>
<body text="#FFA500" alink="#FFA500" vlink="#FFA500">
<center><img src="logo.jpg"></center>
<img align=right src="stick.jpg">
<h6>
<b>
<ul id="navi">
<center><font size="1"><b>
<br /><br />
<a href="index.htm">Home</a><br /><br />
<a href="index.htm">Animationen</a><br /><br />
<a href="index.htm">Animationen für Kinder</a><br /><br />
<a href="index.htm">Bewertung</a><br /><br />
<a href="index.htm">Wie wird's gemacht?</a>
<br /><br /><br /><br />
</font></center>
</ul>
</b>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</h6>
</body>
</html>
10

und wo ist das Semikolon ?

<html>
<head>
<style type="text/css">
body
{ 
background-image; url("h.jpg")[B];[/B]
background-color: none;
background-repeat: repeat;
}

DOCTYPE würde ich noch reinsetzen. Und nebenbei habe ich noch weitere fehler gefunden, wie z.B. das fehlede alt im

11

Der IE5.x mac hatte mit einfachen Anführungszeichen (single quotes) Probleme.

12

immernoch falsch … du hast hinter background-image ein ; gemacht da kommt ein doppelpunkt hin:

im ganzen sieht es so aus
FALSCH: background-image; url(lala.jpg); falsch wegen ; anstatt :
RICHTIG!!! background-image: url( blabla.jpg);