HIntergrundbild div

**Rosso** · 19.06.2012, 20:26

Hallo Leute,

Ich habe gerade aktuellen CSS code auf einen Container angewendet:

#kopf
{
width: 90%;
height: 135px;
margin: 0 auto;
background-image: url(../pictures/logo.jpg);
background-repeat: no-repeat;
background-position: top left;
background-attachment: fixed;
}

Der Container ist ja dank "margin: 0 auto" zentriert, jedoch wird die Position des Bildes vom Rand des Fensters ab gerechnet und das Bild somit nur zur Hälfte angezeigt. Könnt ihr mir helfen, wie ich das reparieren kann?

Danke schon mal im Vorraus

Rosso

**wildmieze** · 19.06.2012, 20:59

Hmmm .. habe ich so auch noch nicht gehört .. liegt es vielleicht am "fixed" ..? Brauchst Du das unbedingt in dem Container? Sonst könntest Du es mal testweise rausnehmen ..

**th2409** · 20.06.2012, 13:24

bei background-attachment: fixed; bezieht sich die Hintergrund-Position auf den Viewport, also damit das Fenster und nicht das DIV.
http://www.webmasterpro.de/coding/ar...ent-fixed.html

**Rosso** · 20.06.2012, 18:04

Hab jetzt mal das fixed entfernt, aber es sieht immer noch aus wie folgt:
Name: Screenes.PNG
Hits: 120
Größe: 55,9 KB

Wenn ich absolute Positionen für den Hintergrund einge, dann muss ich diese auch vom Fenster aus rechnen. Irgendwas stimmt also nicht bei der Berechnung der Positon, allerdings hab ich keine Ahnung warum...

**wildmieze** · 20.06.2012, 21:17

... eigentlich muss die Position gar nicht absolut sein. Ohne backround-attachment: fixed; sollte das Bild einfach oben links im Container anfangen. Ich hab zig Seiten gemacht, die genauso funktionieren

Vielleicht liegt das Problem noch woanders - poste doch mal den ganzen Code.

**Rosso** · 21.06.2012, 17:44

Ok also das hier sind die entsprechenden Ausschnitte: der Entsprechende Container ist "kopf" und hat momentan noch keinen Inhalt. Dann hab ich einfach noch eine Navigationsleiste und nen kleinen Inhalt-Container nach dem Vorbild eines Lehrbuches.

HTML-Code:

  <!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" /><!-- <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> -->
  <title>Vermögensberatung</title>
  <link rel="stylesheet" type="text/css" href="css/navigation.css" />  
  <link rel="stylesheet" type="text/css" href="css/formatierung.css" />
  
  

 </head>
 <body>

  <div id="kopf">

   
  </div>

  <div id="gesamt">

   <div id="navigation">
    <ul>
      <li><a href="startseite.html"> Startseite </a></li>
      <li><a href="#"> CF - unabhängiger <br/>Versicherungsberater</a></li>
      <li><a href="#"> Angebot Flat</a></li>
      <li><a href="#"> Finanz - TÜV</a></li>
      <li><a href="#"> Risikoprüfung</a></li>
      <li><a href="#"> Besorgung von Verträgen</a></li>
      <li><a href="#"> Stellvertreter</a></li>
      <li><a href="#"> Unterschied zum Markt</a></li>
    </ul>
   </div>
   <div id="inhalt">
    <h1>Willkommen!</h1> <br />
    <h1>Schauen und erleben Sie den Unterschied!</h1> <br />
    "Die Natur hat mir nicht gesagt: Sei arm! Nochweniger: Sei reich! Aber sie ruft mir zu: Sei unabhängig!" <br />
    Nicolas Chamfort (1741-1790), franz. Dramatiker
   </div>

  </div>

  <div id="footer">
   <ul>
    <li><a href="#"> Datenschutzerklärung</a></li>
    <li><a href="#"> Disclaimer</a></li>
    <li><a href="#"> Impressum</a></li>
    <li><a href="#"> Kontakt</a></li>    
   </ul>
  </div>

   

 </body>
</html>

Code:

body
{
	background-color: yellow;
	font-family: arial;
}

#gesamt
{
	margin: 40px 100px;
	background-color: green;
	border-style: groove;
	padding-bottom: 200px;
}

#kopf
{
	width: 90%;
	height: 135px;
	margin: 0 auto;
	background-image: url(../pictures/logo.jpg);
	background-repeat: no-repeat;
	background-position: top left; 
	background-color: blue;
	

}






#inhalt
{
	margin-left: 222px;
	
}

#footer
{
	clear: left;
}

**Rosso** · 21.06.2012, 19:23

Also irgendwie hat sich das Problem gerade von selbst erledigt. Funktioniert jetzt perfekt. Vermutlich irgend ein IE bug oder so. Dennoch danke für eure Unterstützung

zur Startseite vom TP

Thema: HIntergrundbild div

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

HIntergrundbild div

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

[CSS] Hintergrundbild

hintergrundbild

Hintergrundbild??

Hintergrundbild

Hintergrundbild

Aktive Benutzer

Aktive Benutzer

Berechtigungen