Designing a webpage - patterns in the background and images layered on top

I've been tasked with creating a webpage that resembles a theatrical stage. The design calls for the following layout:

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

The left curtain, stage, and right curtain should maintain a fixed width in the center of the screen. When the browser is resized horizontally, the outer "curtain repeats" must be anchored to their respective curtains but repeated outward. This will create an edge-to-edge curtain-stage-curtain effect.

Another challenge I need to tackle is making sure that the left and right curtains overlap the stage. If an element is positioned far to the right on the stage, part of the "right curtain" should cover it, giving the impression that the element is partially hidden behind the curtain.

I'm still exploring various CSS techniques, but this project is pushing my limits. Any assistance or guidance you can provide would be greatly appreciated. Thank you in advance for your help.

htmlcss

Answer №1

Check out this simple design with no images, just background colors:

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; /* customize the repeating curtain background here */
}

.theatre .content{ 
    position:relative;            
    width:600px;
    height:400px;
    margin: 30px auto;         
}

.content .curtain{ 
    position:absolute;    
    width:100px;
    height:100%;
    text-align:center;    
}

.content .left.curtain{ 
    left:0;
    top:0;    
    background:#963; 
}

.content .right.curtain{ 
    right:0;
    top:0;    
    background:#963; 
}

.content .stage{
    width:100%;
    height:100%;
    border-bottom:5px solid #000000; 
    box-sizing:border-box; 
    background-color:#888888;     
    text-align:center;    
}

I placed all the content within a div using class .theatre for customization purposes. If not needed, you can remove it and use 'body' for your repeating background curtain. Let me know if you have any questions. Good luck with your project! :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to customize the color of the placeholder and clear-icon in the ion-search bar without affecting

I am working with two ion-search bars and I need to customize the placeholder and clear icon color for just one of them. <ion-searchbar class="search-bar" placeholder="search"></ion-searchbar> My goal is to target a specific i ...

cssangulartypescriptionic2

Eliminating unnecessary CSS classes

There are multiple references to the specific ".wiki-content" class in the stylesheet: .wiki-content ul,.wiki-content ol,.wiki-content dl { padding-top:0; margin-top:0; } .wiki-content a,.wiki-content a:link,.wiki-content a:visite ...

csshtml

relative font sizing based on parent element

My container is flexible in size, adjusting based on how the user moves elements around the screen. Inside this container, there is both an image and text. The image takes up 80% of the height of the container while the text should take up the remaining ...

htmlcssfont-size

Guiding users who have disabled JavaScript through redirection

When faced with the following markup, users whose browser has JavaScript disabled will be redirected to an alternative page. This alternate page may attempt to mimic the site's functionality without JavaScript or simply display a warning message infor ...

javascriptajaxhtmlria

Assistance needed for disabled JavaScript

I'm currently working on a small application where I need to display some text wrapped in 3 divs. The goal is to only show one div at a time and provide users with prev and next buttons to switch between them. However, when JavaScript is disabled, I w ...

javascripthtmlcss

Having trouble with refreshing the div content when using jQuery's $.ajax() function

My goal is to refresh a div that has the id #todos after saving data in the database. I attempted to use .load() within $.ajax() $('.todo--checkbox').change(function () { let value = $(this).data('value'); $.ajax({ url: ...

javascripthtmljquerynode.jsajax

Height Issue with Nested Columns in Bootstrap 5

My nested columns are giving me trouble with their height. I want them to have equal heights on both big and small screens. Currently, the sizes look perfect on the largest and smallest viewports, but not on medium-sized ones. Check out examples on codepen ...

htmlcssresponsive-designnestedbootstrap-5

Python Selenium cannot locate button within an iframe

click here for imageI am trying to interact with the "바카라 멀티플레이" button located at the center of the website. Even after switching into an iframe, I am unable to detect the button. How can I achieve this? from selenium import webdriver im ...

pythoncssseleniumxpathiframe

Is there a way to ensure my function runs as soon as the page starts loading?

My goal is to have a function execute as soon as a person opens my page, without requiring any interaction. The function should trigger on page load, rather than waiting for a click event. Additionally, I want the function to repeat every 90 seconds. I&apo ...

javascripthtmlcssonloadtransition

ReactJs: Struggling to programmatically set focus on an element with React.createRef()

Looking to detect when a user clicks on an arrow using the keyboard? I stumbled upon the Arrow Keys React react module. To make it work, you need to call the focus method on a specific element. Manually clicking on an element does the trick: https://i.s ...

javascripthtmlreactjsdomautofocus

Discovering the largest element within a group to establish the height for the rest

There is a component mapping card elements that look like this: https://i.stack.imgur.com/CktsE.png The topmost, leftmost card appears to be missing some height compared to others. Is there a way to determine the height of the tallest components and then ...

cssreactjsnext.jstailwind-cssnext.js13

JavaScript functions do not work within the HTML code

I am currently working on my debut website and I'm facing an issue with the JavaScript file not functioning properly. Is there a chance you can help me troubleshoot this? I'm still in the learning stages of programming. This is the HTML content ...

javascripthtmlcss

What is the best way to ensure a flex element occupies a greater space within another flex element using TailwindCSS?

After spending hours trying different solutions and even resorting to brute force, I am still struggling to make this work. Objective: To increase the width of the cards when the screen size is larger Below is my main component: function App() { const ...

cssreactjsflexboxtailwind-css

What is the best way to ensure my checkboxes are positioned on individual lines?

I am trying to vertically align my checkboxes so that each option appears on a separate line. I searched online and found suggestions to use vertical-align: middle, but that only changes the position of the label. I want each checkbox to be displayed on it ...

htmlcsscheckboxvertical-alignment

Switching the position to fixed causes it to lose its justification functionality

My goal is to create a table using div elements. However, when I set the header to have a fixed position to prevent it from disappearing when scrolling through more data, all the header cells shift to the right. I attempted to adjust the margin-left proper ...

htmlcss

Leveraging the capabilities of the phonegap framework alongside node.js, javascript, html, mysql, and css

Could someone demonstrate how to utilize phonegap and node.js to interact with a mySQL database by pushing and pulling data from an HTML page or form? THANKS EDIT var connection = mysql.createConnection({ host : 'localhost', user : 'root& ...

htmlnode.jscordova

What is the best way to preserve the allocated space in the DOM while utilizing CSS display:none?

I have explored the functionalities of display:none and visibility:hidden. However, I need to utilize display:none for a specific reason while still preserving the element's allocated space in the DOM to prevent any impact on adjacent elements. Is thi ...

javascriptjquerycss

Wordpress Debacle: Bootstrap Columns Clash

Currently, I am in the process of designing a unique theme. In my code, I have implemented a condition that generates an additional div with the class "row" after every three posts or columns are created. Everything seems to be working smoothly, except f ...

phphtmlcsswordpresstwitter-bootstrap

Utilizing CSS, Javascript, and Jquery to Toggle a DIV's Visibility Based on Clicking Either of Two Images

Need help with showing and hiding divs based on image clicks. Have 2 images (Image_A and Image_B) and 2 hidden Divs (Div_A and Div_B). If Image_A is clicked, show Div_A. If Image_B is clicked, hide Div_A and show Div_B. This should work both ways, ensurin ...

javascriptjquerycss

The speed at which Laravel loads local CSS and JS resources is notably sluggish

Experiencing slow loading times for local resources in my Laravel project has been a major issue. The files are unusually small and the cdn is much faster in comparison. Is there a way to resolve this problem? https://i.stack.imgur.com/y5gWF.jpg ...

javascriptcssperformancelaravel-5assets