Mise en page css - arrière-plans répétitifs et images superposées

Question

On m'a demandé de concevoir une page qui ressemble à une scène. Les éléments graphiques sont disposés comme suit:

[curtain repeat][left curtain][stage][right curtain][curtain repeat] 

rideau gauche, étape, et le rideau droit restent une largeur fixe au milieu de l'écran. Si le navigateur est étendu horizontalement, les "répétitions de rideau" extérieures doivent être ancrées à leurs rideaux respectifs, mais répétées vers l'extérieur du navigateur. L'effet est rideau-étape-bord-rideau.

Maintenant, l'autre astuce que je dois mettre en œuvre est que les rideaux gauche et droit recouvrent ou chevauchent la scène. Donc, si je place un élément loin à droite sur la scène, une partie du «rideau droit» se chevauchera, comme si cet élément se trouvait partiellement derrière le rideau. Je suis encore en train d'apprendre les trucs de css, mais je pourrais utiliser un jump start, car c'est compliqué au-delà de mon niveau d'expérience. Merci d'avance pour votre aide.

Answer 1

Voici un coup de couteau à une structure de base sans images, seulement BKG couleurs:

http://jsfiddle.net/dtYKL/

HTML:

<div class="theatre"> 

    <div class="content"> 
     <div class="curtain left">left curtain</div> 
     <div class="stage">stage!</div> 
     <div class="curtain right">right curtain</div> 
    </div> 

</div> 

CSS:

body, html{ 
    margin:0;    
    width:100%; 
    height:100%; 
} 

.theatre{ 
    width:100%;     
    background:#369; /* this is where you'd add your repeating curtain bkg */ 
} 

.theatre .content{ /* this is your fixed-width stage content */ 
    position:relative;    
    width:600px; 
    height:400px; 
    margin: 30px auto; /* centers the content */   
} 

.content .curtain{ /* set your common styles, dimensions, positions for left + right curtains */ 
    position:absolute;  
    width:100px; 
    height:100%; 
    text-align:center;  
} 

.content .left.curtain{ /* position and add image for left curtain */ 
    left:0; 
    top:0;  
    background:#963; /* this is where you'd add your left curtain image */ 
} 

.content .right.curtain{ /* position and add image for right curtain */ 
    right:0; 
    top:0;  
    background:#963; /* this is where you'd add your right curtain image */ 
} 

.content .stage{ 
    width:100%; 
    height:100%; 
    border-bottom:5px solid #000000; /* this will simulate a stage floor, you can use a solid bkg image if you want */ 
    box-sizing:border-box; /* this is so the border added above won't add to the div height */ 
    background-color:#888888; /* this is the stage background */  
    text-align:center;  
} 

I imbriqué tout le contenu pour cela dans un div avec classe .th eatre, de cette façon, vous pouvez spécifier une hauteur définie pour votre composition. Si ce n'est pas nécessaire, n'hésitez pas à supprimer ce niveau de confinement et utilisez simplement «body» comme rideau de fond répété. Lemme savoir si vous avez des questions et bonne chance! :)