Background with borders full of parallax effects scrolling in sync

I'm completely new to the world of HTML and CSS, and I was hoping for some guidance. I've been trying to wrap my head around a tutorial on creating parallax scrolling websites, which you can find here:

However, I noticed that the tutorial includes normalize.css, which is responsible for making each image expand to fit the browser perfectly. I'm unsure about which specific part of the code is achieving this effect, so I was hoping someone could direct me to that section to help me analyze it.

If I remove normalize.css from the package, the website looks like this:

With normalize.css included, the website looks like this:

I'm curious about how they achieve this effect with normalize.css. Here is the link to the normalize.css file: https://github.com/necolas/normalize.css/

While I understand there are different methods to achieve this, I'm specifically interested in understanding the approach taken using the normalize.css file.

My Attempts: I've experimented with using background-size for each image, but it ends up making the last image I apply it to fill the entire background behind the other images.

Answer №1

Normalize.css is essential for stripping away default styles imposed by browsers, such as the preset margin on the body element.

To eliminate the black border around elements, you can utilize the following CSS:

body {
     margin: 0;
     }

For divs with image backgrounds, the following properties are commonly used:

background-repeat: no-repeat;
background-position: 50% 0px;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;

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

Implement a scrolling feature to the tooltip when using "data-toggle"

I'm struggling with a piece of code that showcases a tooltip when the user hovers over the question circle icon. The tooltip's content can't exceed 1000 characters, but I need to figure out how to make the overflow scroll by adjusting the to ...

Shade the div if the name of the child element matches the location's hash

I am currently working on an AngularJS web project. My goal is to highlight a specific div when clicking on an anchor link. The structure of the HTML is as follows: <div interaction-list-item="" sfinx-interaction="interaction" class="ng-isolate-scope" ...

"Troubleshooting: Child Component Not Reflecting Changes in UI Despite Using Angular

My child component is designed to display a table based on a list provided through @Input(). The data is fetched via http, but the UI (child component) does not update unless I hover over the screen. I've seen suggestions about implementing ngOnChange ...

What is the method for altering a CSS element's keyframe animation while it is currently running?

My little mouse speed detector, although not perfect, provides me with the current mouse speed every 100ms in the variable window.mouseSpeed.t. I decided to implement this feature because I wanted to create a whimsical animation at the bottom edge of the s ...

displaying a div as a pop-up within an ASP.NET MVC 4 web application

One aspect of my asp.net MVC 4 application involves a partial view structured like so: <form class="qty-add" action="#" method="POST"> <label>Qty:</label> <div class="inp-controller"> <a href="#" c ...

Jenkins encountered an issue where script execution was blocked on <URL> due to the document's frame being sandboxed without the 'allow-scripts' permission set

When using an iFrame in HTML, it's always best to remember to sandbox it and set the 'allow-scripts' permission to true. However, I'm facing an issue in my pure Angular JS application where there is no iFrame present. It runs smoothly ...

jQuery Ajax had no errors, yet still could not achieve success

I've encountered a problem with my ajax call to the controller. The alert in my success function isn't displaying and I'm not seeing any errors in the console. I'm unsure of what steps to take next. Controller - rate function graph($u ...

Is there a way to verify that all of my HTML elements have been loaded in AngularJS?

I am currently utilizing angularJS version 1.2.1 along with angular-ui-bootstrap. Within my code, I have a collection of <ng-includes> tags from angularjs and <accordion> components from angular-ui. When loading the content, I need to initiat ...

Adding a div with a canvas element is malfunctioning

I've been experimenting with using canvg to convert an SVG within a div into a canvas. So far, the conversion is working fine but when I try to copy the innerHTML of the div to another div, it's not functioning properly. The canvas is being gener ...

Unexpected parse error being thrown by $.ajax when processing valid JSON data

I'm facing a minor issue. I've been attempting to access a JSON file using a jQuery $.ajax call and after verifying the validity of my JSON code online, I still encounter a parse error with syntax errors in the JSON. You can locate the error by ...

Tips for simulating or monitoring a function call from a separate file

Within my codebase, there is a function that is triggered upon submission. After the payload has been posted, I aim to execute a function located in a distinct file named showResponseMessage: Contact.js import { onValueChangeHandler, showResponseMessage, ...

Design a Logo-aligned Header using Bootstrap 4 for a professional and sleek look

I'm attempting to design a header using bootstrap 4 that resembles the image shown https://i.sstatic.net/MFVZU.png. However, I'm encountering several issues with this method. The main problem is that the logo is not properly centered in the middl ...

What is the best way to include a JavaScript function within a JSON file?

I am attempting to transform a JSON file into an object within my application, complete with embedded functions. However, I am facing difficulties in accomplishing this task. The JSON file causing issues is as follows: { "draw": function() { ctx.cle ...

Internet Explorer causing problems with JQuery

I encountered an error with the following code snippet: jQuery.post('/user/result/generate',{ 'id': getHidden() }, function(html) { $('#result').html(html); }); The error message is: ...

Avoiding useCallback from being called unnecessarily when in conjunction with useEffect (and ensuring compliance with eslint-plugin-react-hooks)

I encountered a scenario where a page needs to call the same fetch function on initial render and when a button is clicked. Here is a snippet of the code (reference: https://stackblitz.com/edit/stackoverflow-question-bink-62951987?file=index.tsx): import ...

"Unsuccessful Grails GSP Ajax Call: OnSuccess Function Fails to Trigger

Within my Grails .gsp file, I am executing an ajax call: $.ajax({ async: false, url: '<g:createLink controller="mycontroller" action="myaction"/>', data: params, dataType: 'json', contentType: 'application/json; ch ...

Showing list data from script to template in vue - A step-by-step guide

My task involves displaying data from the main table in MySQL. I need to show the type of each major by comparing it with the id in the faculty table. I have successfully logged this information using console.log, but I'm unsure how to display it on t ...

Setting a custom background image in HTML using the designated file PATH

My current issue involves the inability to set my background photo using a CSS file. I am utilizing NetBeans for this project. Inside a folder named css, there is a file called global.css which contains the following code: body{ background-image: url ...

Incorporate JavaScript strings into HTML dynamically

I am facing some challenges with single quotes while trying to append HTML with a JavaScript string. So far, I have managed to successfully append the element: $("<a class='action-button' id='pl65197buy' value='buy now'&g ...

Mentioning a component that is loaded dynamically

Here is the code snippet: <html> <head> <script type="text/javascript" src="jquery.js"></script> </head> <body> <div id="Block"></div> <script type="text/javascript"> function Request(M ...