Feste div Hintergrund

Question

Ich möchte ein Layout erstellen, wo ich ein Bild auf der linken Seite und Inhalt auf der rechten Seite anzeigen möchte. Das Bild sollte konstant bleiben, wenn der Inhalt gescrollt wird.

Die CSS Ich verwende:

<style type="text/css"> 

     #page-container 
     { 
      margin:auto;    
      width:900px;    
      background-color:Black; 
     } 

     #header 
     { 
      height:150px; 
      width:650px; 
     } 

     #main-image 
     { 
      float:left; 
      width:250px; 
      height:500px; 
      background-image:url('../images/main-image.png'); 
      position:fixed; 
     } 


     #content 
     { 
      margin-left:250px; 
      padding:10px; 
      height:250px; 
      width:630px; 
      background-color:Teal; 

     } 
    </style> 

Die HTML:

<div id="page-container"> 
    <div id="header"><img src="someimagelink" alt="" /></div> 
    <div id="main-image"></div> 
    <div id="content"></div>  
</div> 

viel Zeit auf dieser Seite und ich haben gezeigt, dass background-attachment verstanden: feste Positionen das Bild im gesamten Ansichtsfenster und nicht das Element, auf das es angewendet wird.

Meine Frage ist, wie gehe ich über das Erstellen dieser Art von Layout?

Ich möchte dieses Bild nicht als Hintergrundbild geben, als ob das Fenster in der Größe verändert wird, könnte es versteckt werden. Ich möchte, dass Bildlaufleisten angezeigt werden, wenn die Fenstergröße weniger als 900 Pixel (meine Seitenbreite) beträgt, damit das Bild jederzeit angezeigt werden kann.

Das passiert mit diesem Code, aber ich möchte, dass das Bild stattdessen an meinem Element beginnt.

Wie gehe ich dabei vor ?? Fest Immobilie # main-image:

Vielen Dank im Voraus :)

Edited: eine Position

nahm ich den Rat und das hinzugefügt. Verwenden Sie HTML und CSS wie oben gezeigt. Jetzt möchte ich auch den Header reparieren, so dass es sich nicht bewegt. Grundsätzlich sollte nur mein Inhaltsbereich scrollen. Allerdings, wenn ich eine Position hinzufügen: in der Kopfzeile fixiert, sitzen meine # Haupt-Bild und # Inhalt jetzt oben auf meiner Kopfzeile. Wenn ich einen Rand oben hinzufügen: 150px (da meine Kopfhöhe 150px ist) zu # Hauptbild, funktioniert es gut und bewegt sich entsprechend nach unten. Wenn ich jedoch einen Rand-Top: 150px zum #content hinzufüge, bewegt sich meine Kopfzeile um 150px nach unten und sitzt immer noch auf meinem #content. Kann mir bitte jemand erklären, warum das passiert? Vielen Dank im Voraus :)

Answer 1

Werfen Sie einen Blick auf diesen Link:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

Sie können lernen, wie man mit ihm Div des positionieren.

Dies wird Ihr Problem lösen: #main-image {position:fixed;}

---

EDIT: Ich bin nicht sicher, was das Problem verursacht, aber hier ist die Lösung: #content{ position:relative; top:150px; }

Meine Vermutung: Ich denke, Das passierte, weil bei Verwendung von position: fixed diese 2 Divs relativ zum Browserfenster positioniert wurden, während die andere relativ zum Dokument selbst war.

In diesem Link erfahren Sie mehr über Positionierung sehen und Sie können auf die Position der Immobilie einige dieser Funktionen testen:

http://www.w3schools.com/cssref/pr_class_position.asp

Über die Tatsache, dass ein div über ein anderes positioniert wurde, sollten Sie suchen für die Eigenschaft 'Z-Index'. Firefox hat einen 3D-Modus, so dass Sie dies deutlicher sehen:

http://www.addictivetips.com/internet-tips/browse-internet-in-3d-using-mozilla-firefox-11-tip/

Answer 2

Setzen Sie eine min-width auf html und body.

Answer 3

Haben Sie versucht, Ihre # page-Container relativ und Ihre # main-Bild Behälter auf absolute und Einstellen der Position unter Verwendung von oben, unten Einstellung usw. Dann sollten Sie auch in der Lage sein, Ihre #content Container nach rechts zu schweben .