Sfondo div fisso

Question

Voglio creare un layout in cui voglio visualizzare un'immagine a sinistra e il contenuto a destra. L'immagine dovrebbe rimanere costante quando il contenuto scorre.

il CSS che sto usando:

<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> 

L'HTML:

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

un sacco di tempo su questo sito e ho capito che background-attachment: fixed posizioni l'immagine nell'intera finestra e non l'elemento a cui è applicata.

La mia domanda è: come faccio a creare questo tipo di layout?

Non voglio dare quell'immagine come immagine di sfondo, come se la finestra fosse ridimensionata, potrebbe essere nascosta. Voglio che le barre di scorrimento vengano visualizzate se la dimensione della finestra è inferiore a 900 px (la larghezza della pagina) in modo che l'immagine possa essere visualizzata in qualsiasi momento.

Ciò accade con questo codice, tuttavia vorrei che l'immagine iniziasse dal mio elemento.

Come faccio a fare questo ??

Grazie in anticipo :)

Modificato:

ho preso il consiglio e ha aggiunto un position: fixed proprietà # main-immagine. Usando l'HTML e CSS come mostrato sopra. Ora, voglio anche correggere l'intestazione in modo che non si muova. Fondamentalmente, solo la mia sezione di contenuto dovrebbe scorrere. Tuttavia, se aggiungo una posizione: fissata all'intestazione, la mia # main-image e #content ora si trovano in cima alla mia intestazione. Se aggiungo un margine superiore: 150 px (poiché la mia altezza di intestazione è 150 px) all'immagine principale #, funziona perfettamente e si sposta in modo appropriato. Tuttavia, se aggiungo un margine superiore: 150px al #contenente, la mia intestazione scende di 150 px e rimane ancora in cima al mio #contenuto. Qualcuno può spiegare perché questo sta accadendo? Grazie in anticipo :)

Answer 1

Date un'occhiata a questo link:

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

È possibile imparare a posizionare Div di con esso.

Questo risolverà il vostro problema: #main-image {position:fixed;}

---

EDIT: Non sono sicuro di ciò che ha causato il problema, ma ecco la soluzione: #content{ position:relative; top:150px; }

la mia ipotesi: penso ciò è accaduto perché durante l'uso della posizione: fissi quei 2 div erano posizionati rispetto alla finestra del browser, mentre l'altro era relativo al documento stesso.

In questo link potrete vedere di più su posizionamento e si può provare alcune di queste caratteristiche legate alla proprietà position:

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

Circa il fatto che un div è stato posizionato su un altro, si dovrebbe cercare per la proprietà 'z-index'. Firefox ha una modalità 3D in modo da poter vedere questo più chiaramente:

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

Answer 2

Impostare un min-width su html e body.

Answer 3

Hai provato a impostare il contenitore della pagina # in relativo e il contenitore # dell'immagine principale in assoluto e impostando la posizione utilizzando in alto, in basso, ecc. Quindi dovresti anche essere in grado di spostare il contenitore #content verso destra .