Not compatible with certain browsers, scrollable wrapper in fullscreen

I am looking to create a unique layout with a fullscreen div on top of a footer. The main element (#wrapper) should have a fullscreen background image and be scrollable to reveal the footer underneath.

Check out my code on JSFiddle: https://jsfiddle.net/tvuqzd17/

To Be Added: Custom CSS snippet
<div id="wrapper"></div>
<footer></footer>

However, I am encountering two issues:

  1. The layout works in Chrome but not in Safari.
  2. The background image remains fixed as I scroll down, which is not the desired behavior.
htmlcss

Answer №1

To ensure that the container always takes up 100% of the height, simply leave the footer to stand next to it.

Additionally, if you want the background image to move when scrolling, you don't need to have a fixed background.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#wrapper {
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow-x: auto;
  background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center;
  background-size: cover;
  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3);
}
footer {
  bottom: 0;
  z-index: -10;
  width: 100%;
  height: 300px;
  background: #555;
}
<div id="wrapper"></div>
<footer></footer>

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

I experienced issues with the brackets software freezing up while using the Bootstrap min CSS file

Recently, I've been using brackets as my text editor and have run into an issue with the bootstrap.min CSS file. For some reason, it keeps freezing whenever I try to load it in brackets. Oddly enough, HTML files work perfectly fine, but ...

cssadobe-brackets

Tips for customizing the timing of a Bootstrap modal's opening delay?

I have integrated gem "bootstrap-sass", "~> 2.3.0.0", which indicates that I am utilizing Bootstrap 2. Detailed information on the modal can be found here. The code for my custom modal looks like this: #Modal.modal.hide.fade{"aria-hidden" => "true" ...

javascriptcssruby-on-railstwitter-bootstrapmodal-dialog

Utilizing jQuery for displaying or hiding list elements

To view all the code, click on this link: http://jsfiddle.net/yrgK8/ A section titled "news" is included in the code snippet below: <ul id="news"> <li><p>asfdsadfdsafdsafdsafdsafdsafdsafdsa</p></li> <li>&l ...

javascriptjqueryhtmlcssslideshow

How to dynamically add an HTML element following a specific div class in Typescript and Angular

Is there a way to dynamically insert a component into a div after a specific element with a designated class name using TypeScript? <div class ="{{order.orderId}}"> <div class="enter-here"></div> <other html elements here> < ...

htmlangulartypescript

How can an accordion icon be added and list toggling be accomplished when HTML data is sourced from an API instead of a JSON response?

I have an API that sends HTML data as a response. The task at hand is to add accordion icons to the items in the list and enable list toggling using HTML, CSS, JavaScript, React, and MaterialUI. Unfortunately, I am limited in my options and cannot use JQ ...

javascripthtmlcssreactjsmaterial-ui

"In JavaScript, the use of double quotes within a string is

What is the best way to include double quotes in a JavaScript string for display on a webpage? I'm currently tackling my JavaScript assignment and need to insert double quotes within a list, like the example below: if (i == 0) { error += "<l ...

javascripthtml

Modifying an HTML attribute dynamically in D3 by evaluating its existing value

I'm facing a seemingly simple task, but I can't quite crack it. My web page showcases multiple bar graphs, and I'm aiming to create a button that reveals or conceals certain bars. Specifically, when toggled, I want half of the bars to vanish ...

javascripthtmld3.js

Disable a button during an AJAX request

Whenever a button is clicked, the record is saved to the database without refreshing the page using AJAX. I have implemented the AJAX code successfully. Now I need guidance on how to manage the state of the Submit button - enabling/disabling it dynamicall ...

javascripthtmlajax

Looking to design an interactive grid for generating dynamic thumbnails

I am a beginner in the field of web development and I have a desire to create a website for showcasing my portfolio. This website should feature project thumbnails along with brief descriptions, all of which should be displayed dynamically. Although I poss ...

phpjavascriptjqueryhtmlcss

In the event that conflicting media queries take precedence over one another

I developed a set of queries for a particular element on a landing page. Here is the HTML structure: <div class="hsContent"> <article> This is my amazing content. Wow! </article> </div> This is how the initial styling looks fo ...

htmlcssmedia-queries

The HTML output generated by JSF component libraries is subpar. Is this level of quality really acceptable?

Back when I worked on web-apps using jsp/jstl and jQuery, I made sure to keep my HTML clean and separate from styles and scripts. JSP would sometimes add unnecessary spaces and blank lines, but that was pretty much it. Now I'm giving jsf a try for de ...

htmljsfria

Using CSS3 to shift a div in relation to another moving div

Take a look at this JSfiddle. I am trying to make the "Push this!" div move when the menu resizes/expands on hover. Is it possible to achieve this effect using only CSS? <div id="nav"> <ul> <li><a href=""><span>01</spa ...

jqueryhtmlcss

Has a newly created element been styled or are all values set to default since it is outside of the DOM?

First, I begin by creating an element: let link = document.createElement('a'); After my document is fully loaded and all styles and scripts are applied. The styles may look something like this: a { background-color: salmon; } Therefore, it w ...

javascriptcssdom

Issues arise with jQuery onclick event functionality when the DOM structure is altered

I'm struggling to grasp the concept of jQuery (v1.11) when it comes to events and how DOM interaction impacts those events. The scenario: I am creating a grid of inline-blocks with the class "letter" and listening for clicks: $('.letter).on(&a ...

javascriptjqueryhtmlcssdom

Is there a way to ensure that the div of my template spans 100% in width and height?

I'm attempting to make my div 100% in size but I am having trouble achieving it. Here is my code: <template> <div> <Navbar/> <Calendar/> </div> </template> <script setup> import Calendar from &apos ...

cssvue.js

Arranging Nav Items in a Stack with Bootstrap 4

Struggling to create a unique navigation bar design with fixed elements on both the left and right sides. The challenge arises when scaling down to mobile, as the icons on the right end up stacking. Any suggestions on how to resolve this issue? <div ...

htmlcssreactjstwitter-bootstrap

Enhance Your Navbar in Bootstrap 3 by Creating Vertically Expanding Links Relative to Brand Image Dimensions

To best illustrate my issue, I will begin with a screenshot of the problem and then explain what I aim to achieve. Here is the current state of my navbar: Currently, the text of the links on the right side is positioned at the top. Additionally, this is h ...

htmlcsstwitter-bootstrap

"Showcase a Pair of Images with Just a Single Click. Leveraging PHP and

With two div boxes, one for Input and the other for Output as displayed below: My goal is to upload an image using PHP and store it in both the Input and Output folders. Upon clicking the Submit button, I want the image from the Input folder to be shown ...

phpjqueryhtmlajaxfile-upload

Retrieve a specific column value upon button click in HTML and JavaScript

I am faced with a table containing multiple columns, each row equipped with an edit button. Upon clicking the edit button, a modal view pops up where users can input values that are then sent via AJAX to my controller. The challenge I'm encountering ...

javascriptjqueryhtmlajaxmodal-dialog

Is it possible to generate this result using only Bootstrap 5.2.3?

I'm currently working on a simple HTML project that aims to replicate the layout shown in the image below. I want the output to look exactly like what's displayed in the provided image. The task does not require CSS, only Bootstrap is needed for ...

htmltwitter-bootstraptwitter-bootstrap-3bootstrap-5