background-image: center

mira666 · 05.12.2007, 14:45

Hallo Zusammen,

ich hab schon verschiedene Beiträge gelesen, konnte leider mein Problem nicht finden. Es ist ganz bestimmt sehr banal und ich hab einfach nur nen Denkfehler.

Also:
Ich habe auf der Seite ein Background-Image, positioniere auch alles brav in einer externen CSS Datei. Validiert hab ich schon alles und es wurden keine Fehler gefunden.
Ich möchte, dass das background-image immer mittig angeziegt wird, egal wie groß das Fenster ist. Im IE paßt auch alles, aber mit Opera und FF klappts nicht, hier klemmt es immer in der oberen linken Ecke. (Die DIVs funktionieren mittig)

Hier mal der Code:

HTML-Code:

body {
	font-size:small;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	background-image: url(../images/Titelpic.jpg);
	background-repeat: no-repeat;
	background-position:center;
	}

Lieben Dank für Eure Hilfe

jayjay · 05.12.2007, 14:59

versuch mal:

Code:

body {
	font-size: small;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
	background-image: url(../images/Titelpic.jpg);
	background-repeat: no-repeat;
	background-position: center center;
	}

mira666 · 05.12.2007, 15:04

leider nur in der vertikalen mittig.

achso - was ich vergessen hatte, das bild klemmt nicht nur oben, es war auch noch zur hälfte verschwunden, mit "center center" ist es vertikal richtig und horizontal im ganzen zu sehen, aber immernoch am oberen rand.

mira666 · 05.12.2007, 15:08

vielleichtt hilft das hier noch:

HTML-Code:

#content {
	width: 1000px;
	height: 667px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -500px;
	margin-top: -333px;
	}

jayjay · 05.12.2007, 15:34

gibts nen link? oder mehr code?

mira666 · 05.12.2007, 15:47

CSS Code:

HTML-Code:

@charset "ISO-8859-1";
/* CSS Document */

body {
	font-size:small;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#000000;
	background-image: url(../images/titelpic.jpg);
	background-repeat: no-repeat;
	background-position:center;
	}
	
h1 h2 {
	color:#000000;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	
h1 {
	font-size:120%;
	}
	
h2 {
	font-size:110%;
	}
	
a:link, a:visited, a:hover, a:active  {
	text-decoration:none;
}
#contextde {
	position:absolute;
	left:510px;
	top:250px;
	width:450px;
	height:370px;
	z-index:3;
	visibility: visible;
}
#contexten {
	position:absolute;
	left:510px;
	top:250px;
	width:450px;
	height:370px;
	z-index:4;
	visibility: hidden;
}
#de {
	position:absolute;
	left:10px;
	top:224px;
	width:72px;
	height:18px;
	z-index:5;
}
#disclaimer {
	position:absolute;
	left:10px;
	top:628px;
	width:200px;
	height:23px;
	z-index:6;
}
#en {
	position:absolute;
	left:84px;
	top:224px;
	width:67px;
	height:18px;
	z-index:7;
}
#impressumtext {
	position:absolute;
	left:10px;
	top:250px;
	width:500px;
	height:370px;
	z-index:1;
	text-align:right;
	visibility: hidden;
}
#disclaim {
	position:absolute;
	left:530px;
	top:254px;
	width:408px;
	height:370px;
	z-index:8;
	font-size:70%;
	text-align:justify;
	visibility: hidden;
}
#content {
	width: 1000px;
	height: 667px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -500px;
	margin-top: -333px;
	}

und das hier ist die HTML Seite:

HTML-Code:

<body>
<div id="content">
<div id="contextde">
  <h1>Wir bieten Ihnen individuelle Lösungen im Personalmanagement.</h1>
  <ul>
    <li>Kurzfristiger Mehrbedarf an Fachkräften? </li>
    <li>Anpassung der Produktionskapazitäten? </li>
    <li>Flexibilisierung durch Outsourcing? </li>
    <li>Sie suchen einen neuen Job? </li>
  </ul>
  <h2>Wenn Sie Interesse an Lösungsvorschlägen zu diesen Themen haben, sprechen Sie mit uns. </h2>
  <p>LUGEJO GmbH<br />
  </p>
  <p>Tel: 02421-2098643<br />
  Fax: 02421-2098646 </p>
  <p><a href="mailto:info@lugejo.com">info@lugejo.com</a></p>
</div>

<div id="contexten">
  <h1>We offer customized Human Resources management solutions. </h1>
  <ul>
 	 <li>Short-term demand for specialists? </li>
   	 <li>Production capacity fluctuations? </li>
   	 <li>Improved flexibility through outsourcing? </li>
   	 <li>Are you looking for a new job? </li>
  </ul>
  <h2>If any of these requirements speak to you, speak to us immediately. </h2>
  <p>LUGEJO GmbH<br />
  </p>
  <p>Tel: 02421-2098643<br />
  Fax: 02421-2098646 </p>
  <p><a href="mailto:info@lugejo.com">info@lugejo.com</a></p>
</div>
<div id="de" onclick="MM_showHideLayers('contextde','','show','contexten','','hide','impressumtext','','hide','disclaim','','hide')">deutsch /  </div>
<div id="disclaimer" onclick="MM_showHideLayers('contextde','','hide','contexten','','hide','impressumtext','','show','disclaim','','show')">Impressum/ Disclaimer</div>
<div id="en" onclick="MM_showHideLayers('contextde','','hide','contexten','','show','impressumtext','','hide','disclaim','','hide')">englisch</div>


<div id="impressumtext">
  <h2>Impressum</h2>
 
   	<p>Lugejo GmbH <br />
    Willi-Bleicher-Straße 9 <br />
    D-52353 Düren <br />
  Deutschland <br /></p>
  	<p>Handelsregister HRB5218 Amtsgericht D-52349 Düren <br />
    Steuernummer 207/5723/0498 <br />
    Geschäftsführer Dipl.-Ing. Josef Schaberger </p>
  <p> <a href="mailto:info@lugejo.com">info@lugejo.com</a> <br />
    www.lugejo.at / www.lugejo.ch / 
    www.lugejo.com / www.lugejo.de / 
    www.lugejo.eu </p>
  <p>Tel: 02421-2098643/ 
Fax: 02421-2098646</p>
  <p>
    Deutsche Bank / BLZ 395 700 24 / Konto 8169500 00 / <br />
	IBAN DE46395700240816950000 / BIC/SWIFT-Code DEUTDEDB395</p>
</div>

<div id="disclaim">
  <p>Haftungsausschluss</p>
  <p> Mit Urteil vom 12. Mai 1998 hat das Landgericht Hamburg entschieden  dass durch die Verwendung eines Internet-Links die Inhalte der  gelinkten Seite gegebenenfalls mit zu verantworten sind.  Dies kann, so das LG, dadurch verhindert werden, dass der Anbieter des  Link sich ausdrücklich von diesen Inhalten distanziert. </p>
  <p> Unabhängig davon, ob dieses Urteil praxisrelevant ist,  oder eher den Werbezwecken deutscher Rechtsanwälte und Richter entgegenkommt:  Wir weisen darauf hin, dass auf den hier gezeigten Web-Seiten auch  Internet-Verknüpfungen (externe Links) zu anderen Anbietern  von Web-Seiten angeboten werden.  Zum Zeitpunkt der Installation dieser Verweise waren die dort  angebotenen Inhalte frei von illegalen Inhalten.  Für alle von uns angebotenen externen Links gilt  unabhängig davon, dass wir keinen Einfluss auf die angebotenen Inhalte haben.  Daher weisen wir ausdrücklich darauf hin, dass wir  in keiner weise Haftung für Links übernehmen. </p>
  <p>Alle angebotenen Inhalte und Informationen unserer HomePage  unterliegen dem deutschen Datenschutzgesetz.</p>
  <p>Die Geschäftsleitung</p>
  <p>Bildnachweis: Quelle: <a href="http://www.photocase.de/de/user.asp?u=27805" onclick="ct(this)">photocase - @kamirika</a></p>
</div>
</div>
</body>
</html>

Rinaldo · 06.12.2007, 01:35

So wird das Hintergrundbild horizontal und vertikal zentriert:

HTML-Code:

body {background: #663300 url(bild.jpg) no-repeat fixed center center;}

Beispiel

Boris · 06.12.2007, 02:41

Ein body { min-height: 100%; } sollte den anderen Browsern ebenfalls "helfen", das ist nämlich nötig.

Rinaldo · 06.12.2007, 03:33

Ich hab mein Beispiel in Firefox2, IE7, IE6, IE5.5 und Opera9.5 getestet - funktioniert...

mira666 · 06.12.2007, 12:04

es klappt! super! herzlichen Dank für die Mühe.

background-image: center

danke jungs!!!