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 there a better method to determine the width when utilizing the jQuery UI resizable feature for improved efficiency?

I'm currently working on a website that features a resizable sidebar. I want the icons and text within the sidebar to shrink proportionally when the user resizes it. Right now, I have implemented an if statement to check if the sidebar's width fa ...

javascriptjqueryhtmlcssuser-interface

"Implementing interactive arrow buttons in a horizontal navigation bar using HTML, CSS, and JavaScript

Seeking advice on creating a horizontal navigation bar with arrow buttons at the sides, such as the one shown below. Despite extensive research, I have not found the exact solution I am looking for. This will be implemented in my Vue.js project. |<| P ...

javascripthtmlcssvue.jsuser-interface

The combination of Asp.net and Bootstrap offers a powerful

I am facing an issue with using Bootstrap in my ASP.NET project. The page displays correctly on a desktop, but when I resize the page to mobile phone size, the navigation panel does not stay in dropdown position. Here is my code: <%@ Page Language="C ...

jqueryasp.netcsstwitter-bootstrap

Allow editing for only a specific part of a text box

Creating a customized personal URL page for users on my site is important to me. I envision the value of a text box being "example.com/username," with the "example.com/" part displayed in the text box, but not editable. I've noticed that Tumblr accom ...

javascriptjqueryhtmluser-input

Is it advisable to incorporate multiple images onto a single canvas?

What is the best approach to handling multiple images in HTML5? Is it preferable to create a separate canvas tag for each image or is it equally effective to have multiple images in one canvas, and how would I go about doing that? Here is the code I have ...

htmlimagehtml5-canvas

Prevent the onclick function of a span element from being triggered when the user clicks on a dropdown menu contained within

Just delving into the world of web development and currently tackling a React project. Encountered an issue where I need to make a span element clickable. However, there's a dropdown within that span that doesn't have any onClick event attached t ...

javascripthtmlcssreactjstypescript

Is there a method to give a webpage a subtle shimmering effect without utilizing CSS box-shadow?

Struggling to Develop a High-Performance Interface Feature I'm currently facing a challenge in coding an interface that requires a subtle and broad glow effect, similar to the example provided below: Exploration of Possible Solutions After expl ...

javascripthtmlcssdomcanvas

Navigate only within the tbody section of the Material UI Table by scrolling

Utilizing the material-ui Table component to build a table with a sticky header presents a challenge. The default behavior is for the scroll to encompass both the thead and tbody of the table. However, I specifically require the scroll functionality to be ...

cssmaterial-ui

Utilize AJAX to showcase JSON data retrieved from a specified URL

We are striving to showcase the names listed in our JSON file within a div using JavaScript. Despite multiple attempts, we have not yet achieved success. JSON data: This is the approach we took: <button>fetch data</button> <div id="result ...

javascriptjqueryhtmlajaxjson

What could be causing my dropdown menu to not appear when clicked?

I am trying to implement the functionality shown in the image. When the Settings button is clicked, a window should open allowing the user to navigate to their desired option. However, I am facing an issue where nothing happens when the button is clicked. ...

javascripthtmlcss

Optimize data storage with javascript on Otree

I've been attempting to store the timestamp from a click in an Otree database, but I've tried using various codes without success. Here's the first code snippet: function myFunction() { var n = Date.now(); document.getElementById(" ...

javascripthtmlotree

Retain chosen option after form submission in PHP/HTML

I have seen many questions asked about this before, but despite trying various solutions here, none seem to work for me. I am populating a list from my mysqli database: <select multiple="multiple" name="formCountries[]" size="5" id="keuzeproduct"> ...

phphtmlmysqli

What could be the reason for my CSS selector with :target not functioning properly?

I tried to implement the instructions I found online for using :target, but it's not working as expected. My goal is to change the background color and font color of #div1 when the first link is clicked, and to change the border of #div2 when the seco ...

htmlcss

Seeking a solution for resizing the Facebook plugin comments (fb-comments) using Angular when the window is resized

Is it possible to dynamically resize a Facebook plugin comment based on the window or browser size? I want the fb-comment div to automatically adjust its size to match the parent element when the browser window is resized. <div id="socialDiv" class="c ...

javascriptcssangularjsfacebooktwitter-bootstrap-3

Looking to enhance the accessibility of a dynamically generated file by implementing the ability to expand and collapse sections as parent nodes

Currently working on a webpage where I am showcasing a testsuite file as the parent node and test cases within the testsuite file as child nodes. I have added checkboxes to both the parent and child nodes. Now, my goal is to include an ex ...

javascriptajaxhtml

"Upload a text file and create a JavaScript variable that contains the text within it

I am currently developing a library and I need to add a feature that reads the contents of a text file. Currently, it only returns the path. How can I modify it to return the actual content of the file? function displayFileContent() { var file = do ...

javascripthtmlupload

Users using an iPhone are unable to adjust the scale or scroll on this website

I find myself wondering what I might be overlooking in this situation Here is the HTML code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="shortcut icon" href="../../nImg/favicon.ico" ...

iphonehtmlcssscale

Elevation on Tab button from the upper side

On my website, I have a large form where pressing the tab key switches between input fields. The inputs will also jump to the top if we reach the bottom of the form. The issue is that I have a fixed header at the top, covering the first 60px. Is there a w ...

jqueryhtmlcss

Tracking User Visits in Codeigniter

Below is the code breakdown: (Step by step) Place counter.txt in APPPATH . 'logs/counter.txt' Set up counter_helper.php in APPPATH . 'helpers/counter_helper.php'; Autoload the newly created helper in APPPATH . 'config/autoload.p ...

phphtmlcodeigniterwebhitcounter

What is the best way to incorporate tooltips in SVG?

My teacher wants me to display a tooltip on an SVG circle with links and information when we hover over it. They suggested using jQuery UI, but I've done extensive research and nothing has been able to assist me so far. ...

javascripthtmlcss