Enhancing div elements with Bootstrap 3 scroll effects

I have a web design project that involves using Bootstrap 3, and I need guidance on how to achieve a specific layout in the correct way:

The layout in question consists of two divs that cover 100% of the screen at any given time. The first div needs to remain fixed at the top of the screen, while the subsequent divs should scroll on top of it, overlapping any text on the first div.

I am seeking advice on the best approach to implement this design.

Fiddle

    html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    position:relative;
}
#imgDiv {
    position:relative;
    height:100%;
    background-image:url(http://wallpapershd3d.com/wp-content/gallery/hd-wallpapers/cute-parrots-hd-wallpaper.jpg);
}

#imgDiv2 {
    position:relative;
    height:100%;
    background-image:url(http://wonderfulengineering.com/wp-content/uploads/2014/01/digital-wallpaper-17.jpg);
}

<div id='imgDiv'></div>
<div id='imgDiv2'></div>
jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Answer №1

To achieve the desired effect, simply add the CSS property position:fixed to the initial div element, setting its width to 100%. Then, proceed to give the subsequent div a top offset of 100%.

Demo Fiddle

CSS

html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    position:relative;
}
#imgDiv {
    position:fixed;
    height:100%;
    width:100%;
    background-image:url(http://wallpapershd3d.com/wp-content/gallery/hd-wallpapers/cute-parrots-hd-wallpaper.jpg);
}
#imgDiv2 {
    position:relative;
    height:100%;
    top:100%;
    background-image:url(http://wonderfulengineering.com/wp-content/uploads/2014/01/digital-wallpaper-17.jpg);
}

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

Using a JavaScript class rather than an ID for toggling visibility

As a complete newbie to JavaScript, I've come across similar questions but I'm lost when it comes to coding - help needed! So here's the code I have so far, and I'm hoping someone can assist me. Currently, I have JavaScript set up to s ...

javascriptjqueryhtmlcss

Using Angular: Linking an href tag with a JSON key

I am working with a JSON object that includes the following value: {test_link : www.test.com} My goal is to retrieve this value and use it as a link in an HTML <a> tag, like so: <a href={{test_link}}> test </a> However, I am encounter ...

htmlangular

Validating HTML using EJS templates set as "text/template" elements

What is the general consensus on HTML validation when utilizing a framework such as Backbone or Meteor and generating views in the client from EJS templates? An issue arises with the fact that name is not considered an official attribute for a <script& ...

javascripthtmlvalidationbackbone.jsejs

Incorporate row numbering feature into jQuery DataTables

Is there a way to have jQuery datatables generate a row number column in the first column, similar to a datagrid in VB? This is what I'm aiming for: If you have any insights on how this can be achieved, please share! ...

jqueryhtmldatatables

Discovering methods to store browser credentials securely in jQuery

I need to prevent the login button from being enabled when either the username or password fields are empty. Check out the code snippet below: $(document).ready(function(){ $('input').on('keyup blur mouseenter', function(e) { ...

javascriptjqueryhtmlspring-mvcspring-security

Assistance needed with selecting a CSS rule

I have a question regarding CSS that seems pretty straightforward. Here is the code in question: <!doctype html> <html amp lang="en-US"> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab: ...

htmlcss-selectors

Ways to determine if new data has been added to a MySQL table

Can anyone explain how the Facebook notification system operates? Here is my code snippet: (function retrieve_req() { $.ajax({ url: 'request_viewer_and_its_utilities.php', success: function(data) { $('.inte ...

javascriptphpjqueryajaxfacebook

Seeking some clarification on the autocomplete search queries

My goal is to enhance the search experience for my site's end users by implementing autofill functionality in the search box using AJAX calls. First, I will share my current code and then pose my questions. This is the HTML code: <input type="te ...

jqueryajax

"Combining HTML, PHP, and JavaScript for Dynamic Web

Here is the PHP function that retrieves the visitor's profile image thumbnail: <?php echo voip_profile_image($visitorid,'thumb'); ?> The issue lies in the fact that $visitorid is stored in JavaScript under the sRemoteid parameter. Wi ...

javascriptphphtml

Adjusting the inner div dimensions to be 100% of the body's size without relying on the parent div using JavaScript

I have a main layer with multiple layers stacked on top of it. I need the second layer to extend its width to match the body's width. Main Project: http://example.com What I've tried: I looked into: Solution for matching div width with body ...

javascriptjqueryhtmlcss

Show angular variable data in a table based on their index

I have an array of angular variables with values like [ 170, 1, 130, 3, 134, 4.... and so on]. I would like to present these values in a table format where the even positioned values are shown in one column and the odd positioned values in another column. ...

javascripthtmlangularjs

The functionality of jQuery's appendTo method seems to be malfunctioning

I am trying to display an image with a popup using jQuery mobile. In my loop, I have the code below: for( var i = 0; i < imageArray.length; i++ ) { counter ++; // Create a new Image element var img = $('<img data-rel="popup" class=" ...

javascriptjqueryappend

Executing a C# program that sends a web request without using JavaScript

My goal is to programmatically download the contents of a website, but it seems like this content is being loaded through ajax calls. Interestingly, when I disable javascript in my browser, only one request is made by the page and all the content is displa ...

c#javascripthtmlajaxhttpwebrequest

minimize the size of the image within a popup window

I encountered an issue with the react-popup component I am using. When I add an image to the popup, it stretches to full width and length. How can I resize the image? export default () => ( <Popup trigger={<Button className="button" ...

javascriptcssreactjstypescriptmaterial-ui

The jQuery click event not triggering on ASP.NET control

I am currently developing a C#/Asp application that utilizes jQuery. I am trying to implement a specific function that should be called every time a click event is triggered on an element with a class of "loadingInProgress". However, the code snippet belo ...

javascriptc#jqueryasp.netloader

Choose specific nodes using the XPath query language

I need help with an HTML snippet: <td> <span class="x-cell">something</span> <span class="y-cell">something</span> <span class="z-cell">something</span> A text <span ...

htmlxpath-1.0

Display and conceal frequently asked questions using JQuery

I'm currently facing an issue with using JQuery to toggle between showing and hiding content when a user clicks on a specific class element. Here is my HTML code: <div class="faqSectionFirst"> Question? <p class="faqTextFirst" style=' ...

javascriptjquery

Updating JSON data within JavaScript

Currently, I am in the process of developing a webpage that pulls data from a json feed. However, I am looking to have it update every 30 seconds without refreshing the entire page, just refreshing the Div & Jquery elements. I have attempted various solut ...

javascriptjqueryajaxjson

Using the integrated pipeline mode in IIS is necessary for this operation to be

My aspx page has an ajax call which looks like this: $.ajax({ url: "/SiteAdmin3/UpsIntegration.aspx/addUpdatePackageData", data: JSON.stringify({ '_OrderNumber': $("#txtOrderNumber ...

javascriptc#jqueryasp.netajax

jQuery Validation - The undefined method 'call' cannot be invoked

Having some trouble getting this to work properly. I'm sure you all understand what I'm trying to do here. Whenever I run the script I encounter an Uncaught TypeError: undefined is not a function on jquery.validate.js line:366 which points to th ...

phpjqueryajaxcodeigniterjquery-validate