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

Limit access to Google Fusion Table to specific types of maps. Eliminate Google Fusion Table for selected map formats

Currently, I am in the process of creating a web map using the Google Maps Javascript API. My objective is to display a Google Fusion Table containing buildings in Boston exclusively on a stylized map named "Buildings." When I switch to the Buildings map t ...

javascripthtmlgoogle-mapsgoogle-maps-api-3google-fusion-tables

Guide on integrating jQuery for AJAX responses to gracefully transition into view within an MVC3 View

Is there a way to create a smooth fade in effect for a <p> element on my website? Currently, I am using Ajax to retrieve the server time and display it. However, the elements appear abruptly and I would like to make the transition more gradual by ad ...

jqueryhtmlajaxasp.net-mvc-3fade

Using JSON as HTML data within Flexbox for interactive hyperlink rollovers

Utilizing JSON to extract HTML data with unique html tags within Flex has presented a challenge. The limited support for HTML in Flex has made it difficult to implement a basic font color rollover effect on links. While Flex only allows for a few HTML tags ...

htmlcssapache-flexjsonrollovers

Ways to restrict input text to a specific set of values

When using an input text form, I need to ensure that users only insert values ranging from 1 to 10. However, my attempts to utilize a mask for customization have resulted in allowing values higher than 10. How can I restrict the input to only be allowed b ...

javascriptjqueryjsonhtmlcss

Using dots instead of lines for the carousel indicators in PrimeNG

I'm currently working on a carousel feature, but I want to change the indicators from lines to small dots. I know the solution lies within the CSS files, but I'm not sure how to implement it. I think I need to create a new CSS class, but I could ...

cssangularprimeng

Parsing HTML using JavaCC

Recently, I've embarked on a journey with javacc and have been tasked with enhancing a basic html parsing using javacc code. My inquiry pertains to the <script> tags which contain numerous characters - like > and < that hold different mean ...

htmlparsingjavacc

PHP Multiple Uploads is a feature that allows users to

I'm currently attempting to utilize the dropzone JS plugin in combination with PHP for the purpose of uploading multiple files and then displaying each file's URL. Here is my progress so far: $upload_dir = 'files'; for($i=0; $i&l ...

javascriptphphtmlupload

insert a new DOM element into an array using jQuery

Looking at the code snippet below: a_ajouter = $('.question'); hidden_div.push(a_ajouter); console.log(hidden_div); Upon examining the output in the console, instead of a DOM object being added to the div as intended, it shows &apo ...

javascriptjqueryhtml

I wonder where the file from the HTML form download has originated

Recently, I've been experimenting with the developer tools in Chrome to observe the behavior of websites at different moments. It has proven useful in automating certain tasks that I regularly perform. Currently, my focus is on automating the process ...

javascriptpythonhtmlajaxgoogle-chrome

Customize your Outlook emails with HTML and CSS to right-align content for a polished look

My current project involves generating a report to be sent via email, with Outlook being the mandatory application in our system. The report's content is HTML-based and utilizes a table layout. Part of the content needs to appear right-aligned within ...

htmlcssoutlook

IE9 does not properly display SVGs used as background images

Utilizing SVG files as backgrounds for my HTML elements has been successful in most major browsers. However, an issue arises when trying to ensure compatibility with Internet Explorer 9. The problem lies within IE9's rendering of the SVG backgrounds, ...

htmlcsssvginternet-explorer-9background-image

What is the reason behind the image not displaying before the AJAX request is initiated and then disappearing once the request is completed?

I am attempting to display a "loading" gif while my AJAX request is being processed. Below are the functions I am using: beforeSend: function () { $('.form-sending-gif').show(); console.log("The beforeSend function was called"); } and ...

javascriptjqueryhtmlcssajax

It's impossible for me to align two blocks at the same level

Check out the following code snippet. I am trying to group mid_left and mid_right within a single mid div tag, but struggling with positioning mid_right correctly - either outside of the mid tag or not at the same level as mid_left. I have experimented wit ...

htmlcss

Changing the color of Material UI pagination: a step-by-step guide

I have integrated Material UI to create a pagination bar for my website. While everything is functioning properly, I am looking to personalize the appearance. After reviewing their documentation, I tried implementing a theme but encountered an issue with c ...

cssreactjsmaterial-ui

What's the best way to include CSS and Javascript in an HTML document?

I'm still getting the hang of CSS and JavaScript. I stumbled upon a cool countdown timer that I'd like to incorporate into my website, but I'm not quite sure how to place it where I envision it. Check out the timer here CSS: html,body{mar ...

javascripthtmlcss

Unusual alterations to HTML and CSS to meet specific needs

Struggling with bringing my website ideas to life! My header contains a navigation bar, followed by a centered chat box within a fixed <section>. Want the left and right side of the chat box to be content areas that scroll in sync while the chat box ...

htmlcss

What is the best way to eliminate the left margin entirely in CSS?

I am attempting to create an image view that fully covers the window, without any margins. I have tried various solutions such as setting the body margin and padding to 0, but they do not seem to work. body { margin: 0px; padding: 0px; } or *, html { ...

htmlcssangulartypescript

I am seeking guidance on extracting specific data from a JSON file and presenting it in an HTML table using jQuery

I am currently working on extracting specific elements from a JSON file and displaying them in an HTML table. I have successfully retrieved the data from the JSON file, stored it in an array, and then dynamically created an HTML table to display the conten ...

jqueryhtmlarraysjson

Why does Material-UI TableCell-root include a padding-right of 40px?

I'm intrigued by the reasoning behind this. I'm considering overriding it, but I want to ensure that I'm not undoing someone's hard work. .MuiTableCell-root { display: table-cell; padding: 14px 40px 14px 16px; font-size: 0. ...

javascriptcssreactjsmaterial-designmaterial-ui

Using the jquery stop() function will halt any ongoing hover effects from being applied

I am currently experiencing a problem with the code found on http://jsfiddle.net/eSbps/. This specific code pertains to a menu system that reveals second levels when hovering over the top levels, using slideDown('slow'). To prevent queuing effe ...

jqueryhtmlcss