Issue with HTML/CSS: rectangle doesn't scroll as expected

I'm in the process of developing a new website and I want to include a top bar and footer with some unique elements on it. Additionally, I am looking to create a rectangular area where I can input text.

After writing the following code snippet, this is the current outcome that I have produced:

div.custom-bg {
  background-position-x: center;
  background-position-y: center;
  ;
  background-image: url("../img/bg32.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
  padding-top: 2%;
  max-height: 100%;
  max-width: 100%;
}

div.alpha-layer {
  background-color: rgba(255, 255, 255, 0.5);
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
  padding-top: 5%;
  height: 500%;
  width: 86%
}

div.top-bar {
  background-color: rgb(32, 42, 52);
  background-attachment: fixed;
  position: fixed;
  left: 0;
  top: 0;
  height: 2%;
  width: 100%;
  padding: 1%;
}

div.footer {
  background-color: rgb(32, 42, 52);
  background-attachment: fixed;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 2%;
  width: 100%;
  padding: 1%;
}
<div class="custom-bg">
  <div class="top-bar"></div>
  <div class="alpha-layer">
    <p> " Lorem ipsum... ( cut ) Curabitur eu amet."</p>
  </div>
  <div class="footer"></div>
</div>

However, upon closer inspection, I noticed that there is no longer a scroll bar to view the entire text as shown in the picture.
Previously, there was a scroll bar but now it seems to have disappeared...

I am looking to add content between the top bar and the footer bar. What could I have potentially done wrong?

The image below illustrates what my ideal design should look like:

https://i.sstatic.net/9eGlI.jpg

htmlcss

Answer №1

Welcome to the code snippet section

body {
  margin: 0;
}

div.custom-bg {
  background-position-x: center;
  background-position-y: center;
  background-image: url("https://www.w3schools.com/images/picture.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 2%;
  padding-top: 2%;
  max-height: 100%;
  max-width: 100%;
}

div.alpha-layer {
  background-color: rgba(255, 255, 255, 0.5);
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
  padding-top: 5%;
  height: 500%;
  width: 86%
}

div.top-bar {
  background-color: rgb(32, 42, 52);
  background-attachment: fixed;
  position: fixed;
  left: 0;
  top: 0;
  height: 2%;
  width: 100%;
  padding: 1%;
}

div.footer {
  background-color: rgb(32, 42, 52);
  background-attachment: fixed;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 2%;
  width: 100%;
  padding: 1%;
}

div.alpha-layer p {
  font-size: 25px;
  font-weight: 500;
}
<div class="custom-bg">
  <div class="top-bar"></div>
  <div class="alpha-layer">
    <p>"Customize your design with this CSS code snippet!"</p>
  </div>
  <div class="footer"></div>
</div>

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

What causes the html5 <audio> tag to appear differently on Chrome versus IE browsers?

When viewed in Chrome, the design appears clean and compact, but when seen in Internet Explorer, it looks large and overwhelming. Check out the screenshots below.. Do you have any suggestions to fix this issue? Know of any mp3 hosting platforms with an emb ...

csshtmlmp3embed

Unable to navigate a simulated scrollbar

As someone who is new to web development, I am embarking on the journey of building a UI Grid that can effectively display a large amount of data. My goal is to implement a scrollbar that allows for horizontal scrolling across approximately 1,000,000 data ...

javascripthtmlcssweb

jQuery selector unable to locate the specified class in the table row

After receiving an array of strings as a response from an SQL query, I am using JavaScript to dynamically add this data as rows to an HTML table: loadUsers: function() { . . . function displayUsersOnTable(response) { for(var i = ...

javascriptjqueryhtmlcss

The error message for validating my form magically disappears

I've been working on creating a registration form using HTML, Bootstrap, and JavaScript. My goal was to display an error message when a field is left empty, but for some reason, the error message appears briefly and disappears afterwards. I can't ...

javascripthtml

Add a fresh item to a list using jQuery

Attempting to add a new list item using jQuery. In this scenario, the process works well, but when attempting to retrieve the value of an input field using .val(), no list item is created. http://www.example.com Code snippet: $(document).ready(functi ...

javascriptjqueryhtml

The directive in Angular compels the webpage to carry out the added HTML attribute

There is a custom directive in my code that applies the spellcheck attribute to two div elements as shown below: (function(){ 'use strict'; app.directive('spellchecker', spellchecker); spellchecker.$inject = ['$timeout&a ...

javascripthtmlangularjs

The image fails to appear

Check out my website at www.wostokhr.pl I am having trouble getting the picture "pics/hero.jpg" to show up in the "div id="hero"" section with a JS parallax function. I have double-checked the HTML and CSS validators and everything seems to be correct. An ...

htmlcss

The code functions perfectly in the Adobe Dreamweaver Preview, but unfortunately, it is not compatible with Chrome

In the process of creating a website using Adobe Dreamweaver over the past few days, I encountered an issue with JavaScript that should activate upon scrolling. Interestingly, the script works perfectly fine when accessed through this link (), but fails t ...

javascripthtmladobedreamweaver

Highlight the navigation transition in the menu

Is there a more updated tutorial available for creating an underline effect that slides from one link to another when hovered over and remains at the clicked link? I have come across a tutorial on Underline transition in menu which seems to be based on th ...

javascripthtmlcsscss-transitions

VSCode - when indenting, spaces are added around strings

Currently, I am utilizing Vue 3 along with Prettier in VS Code. One issue I am encountering is that when a string is on its own line, it is formatted correctly to my liking. However, the problem arises when my browser in Dev Tools renders strings with extr ...

htmlvue.jsvisual-studio-codeprettier

Issue with JavaScript Onclick Event Handler

Rephrasing Full JavaScript Code. Javascript <div id="PopUp1" style="display: none; color: #FFFFFF;"></div> <div id="Mask"></div> <script type="text/javascript"> var Content = '<p>Content!!!!!</p><input ty ...

javascriptjqueryhtmlonclick

Achieve a full-screen width container in Bootstrap 4 without using the container-fluid class

Is there a way to make the container have a 100% width using media queries so that the elements are contained in a larger screen but not contained in a small one, or vice versa? This code is just an example that used to work with Bootstrap v4 alpha 6, but ...

htmltwitter-bootstrapcssbootstrap-4

Retrieving information from emails, yet providing disorganized text fragments

I have developed a method to remove html, style/script tags, and new line tags from the source code of email pages: def extract_message(url): markup = open(url) soup = BeautifulSoup(markup, "html.parser") for script in soup(["script", "style"] ...

pythonhtmlemailbeautifulsoup

Removing the Yellow Highlight on Input Field Following Email Autocomplete in Chrome

My username-password form is styled and working perfectly, but there's an issue that arises when I log in multiple times. Chrome automatically fills in my email, turning the username textbox yellow. It doesn't seem to happen with Firefox or Safar ...

javascripthtmlcssgoogle-chromecross-browser

Issue with Foundation 6 not triggering the change.zf.slider event

Hey there, this is my first time posting and I could really use some help... I'm struggling to make the $("[data-slider]").on('change.zf.slider', function(){}); event trigger. I've attempted using the id of the element like so $(" ...

javascriptjqueryhtmlzurb-foundation

Swap out a button for another using JavaScript

I am facing a challenge where I need to replace an active button with a deactivate button. The issue is that when I click on the active button, it does change to the deactivate button as expected. However, clicking again does not switch it back to the acti ...

javascripthtmlcss

How can I create a menu navigation in Bootstrap 4 similar to the one on the components website

Greetings! I am not a native English speaker, so please excuse any typos in my message. I am attempting to create a menu that functions exactly like the one on the Bootstrap components page, but with the distinction of appearing on the RIGHT SIDE: http:// ...

htmlcsstwitter-bootstrapbootstrap-4navbar

Is it possible to arrange elements in CSS based on their attribute values?

I need to arrange a list of images in ascending order based on the index attribute using CSS. The challenge is that the index values will change dynamically and new images will be added through Ajax, so I want them to automatically update in the correct or ...

htmlcssimagesorting

Tips for adding additional rows or cells to a table with jQuery

Similar Questions: How to Add Table Rows with jQuery Adding Rows Dynamically using jQuery. I am currently working with a table that contains one row and five editable cells for user input. My goal is to implement an "Add Row" feature using jQuery ...

javascriptjqueryhtml

Tutorial on wrapping HTML content in a CDATA tag using jQuery

Is there a way to enclose some HTML in an element using a CDATA tag to "sterilize" it, so to speak? I've attempted to do so using the following code: $(this).html( "<![CDATA[" + $(this).html() + "]]>" ); However, this approach simply encodes ...

javascriptjqueryhtmlcdatahtml-sanitizing