Establish a background image that can be scrolled

Currently, I am working on a project and have created a fiddle that can be accessed here:

https://jsfiddle.net/0g3u8452/1/

The image I am using is 1920x4000, and I want it to span the full width of the screen similar to setting 

background-size: cover

However, because the image height is significant, I would like users to be able to scroll down to continue viewing it.

I have also created a visual guide for the intended result:

https://i.sstatic.net/WHclV.png

Any assistance in achieving this desired outcome would be greatly appreciated. Thank you!

htmlcss

Answer №1

Have you considered using <img> with the CSS property position: absolute to set it as a background instead?

.container {
  position: relative;
}
.container img.background-img {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
body {
  padding: 0;
  margin: 0;
}
<div class="container">
  <img src="http://via.placeholder.com/1920x4000" class="background-img">
  <div class="other">Other elements</div>
</div>

Answer №2

Are you aiming for this result? Check out this FIDDLE

.bg {
 height: 4000px;
}

Answer №3

Are you searching for something similar to this? I just made a few adjustments to it.

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>

  <body>

    <div class="bg">
      <div class="cont"></div>

    </div>
  </body>

</html>


body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  height: 100%;
  width: 100%;
}

.main {
  width: 100%;
  height: 100%;
}

.cont {
  width: 100%;
  height: 4000px;
  background-image: url("http://via.placeholder.com/1920x4000");
}

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

Creating a dynamic nested list in HTML using JavaScript with data retrieved from a JSON source

I'm trying to generate a dynamic nested ul\li list from a JSON array. IMPORTANT! While I can use jQuery for this transformation, it's in a node.js environment where DOM access is restricted and I must work with a string. The depth of the a ...

javascripthtmlarraysjsonnode.js

Displaying Edit and Delete options upon hovering over the data row

I'm working on a table that uses ng-repeat on the <tr> element. In the last column of each row, I have edit/delete links that should only be visible when the user hovers over the <tr> element. <tr ng-repeat="form in allData | filter:se ...

cssangularjsng-class

Determine the exact location where the mouse was clicked on a webpage containing an iframe

I am trying to retrieve the mouse position on my HTML page, but I am encountering some issues. Here's what I have so far: document.onclick = function(click) { if (click.clientX<340){ myControl.inputs.selection = false; btnRotate.remove ...

javascripthtml

Can you point out the syntax error in my flex code?

I'm attempting to redesign my layout grid using flex. It seems that the flex code I commented out is incorrect, possibly due to an issue with setting the width in my .container class. The grid auto property adjusts the columns automatically within my ...

htmlcssflexboxcss-grid

Make sure PTable maintains a horizontal layout on any device with PrimeNG

When I view my Ptable on desktop or iPad, it looks like this: https://i.stack.imgur.com/ONqZV.png However, when I switch to a device like an iPhone X, it changes to this layout: https://i.stack.imgur.com/H2q7j.png I want the horizontal layout to displa ...

cssangularresponsiveprimeng

Retrieve CSS hover values using jQuery

When the page is loaded, I need to execute a function that retrieves the CSS background image settings as well as the hover background image setting, which I intend to use in a different way. The only technique I have come across requires an actual mouseo ...

jquerycssbackground-image

The functionality of the disabled button is malfunctioning in the Angular 6 framework

Just starting out with angular 6 and I'm using formControl instead of FormGroup for business reasons. app.component.html <button class="col-sm-12" [disabled]="comittee_Member_Name.invalid && comittee_Member_Number.invalid && c ...

htmlangulartypescriptangular6

Implement event listeners to transcluded content in AngularJS

How can I add event handlers to transclusion content in a directive without allowing consumers to add their own click handlers? I want the directive to handle it, but I'm unsure of the correct approach for adding handlers to the content passed with ng ...

javascripthtmlangularjsangularjs-directiveangularjs-ng-transclude

Image set as the background on a website

I recently started working with Groovy and Grails, designing my own personal website. I'm looking to set an image (located in the asset folder) as the background for my index.gsp page. How can I achieve this? ...

htmlcssgrailsbackground-image

Turning off the ability to horizontally scroll in an iframe using touch controls

I am trying to disable horizontal scrolling in an iframe on my website, particularly when a user uses touch input and drags horizontally. The scroll bars can still be visible and draggable when touched directly. Unfortunately, I do not have control over th ...

htmlcssiframescrollhorizontal-scrolling

Tips for adjusting the size of an image in both the vertical and horizontal axes using CSS

As a beginner in HTML, I am currently facing an issue while trying to display a set of pictures. My goal is to resize the pictures based on the current window size while maintaining the aspect ratio. Despite experimenting with various methods like using wi ...

htmlcss

Nested click jQuery with draggable elements

After taking advice from @amphetamachine in this thread, I was able to successfully manage nested clicks using jQuery. However, the drag feature that was previously functioning perfectly has now stopped working since I implemented the delegates. The main ...

jqueryhtmljquery-ui

Having trouble with Tailwind UI components displaying properly in Next.js?

I tried following the Tailwind UI tutorial, but unfortunately, it doesn't seem to match up with my Next.js project. Take a look at my tailwind.config.ts: export const defaultTheme = require("tailwindcss/defaultTheme"); module.exports = { ...

cssreactjsnext.jstailwind-csstailwind-ui

Presentation with multi-directional animations

Curious to know if it's possible to create a unique slideshow that scrolls in multiple directions? The concept is to display various projects when scrolling up and down, and different images within each project when scrolling left and right. Is this i ...

javascripthtmlcsssliderslideshow

"Create a div element with resizable capabilities, similar to a

Is it possible to resize elements like divs in browsers without using jQuery or other libraries like draggable or resizable? I know text-areas can be resized by default, but I'm curious if this functionality can be extended to other elements through p ...

htmlcsstextarea

How to Implement Multi Select Drag and Drop Feature in Angular 4?

Currently, I am implementing Angular 2 Drag-and-Drop from this library to enable the selection of list items using a drag and drop method. However, I have encountered issues with its functionality on touch devices and when attempting to perform multiple it ...

javascripthtmlangulardrag-and-drop

Using TailwindCSS with Vite in a vanilla JavaScript project: A step-by-step guide

As a beginner, I feel like I'm losing my mind trying to figure this out. I've watched countless tutorials and read through numerous documents, but still can't seem to get it working. Does anyone have any advice on how to successfully integra ...

htmlcssnpmtailwind-cssvite

Ways to properly align a navigation bar at the center of the webpage while maintaining the

Whenever I zoom in or out on my page, the homepage button loses its color and fails to expand to the right side. So, I have two main goals: 1) To center the selected area (highlighted by a red border in the image). 2) To extend the green color of the hom ...

htmlcss

Rows that intersect - Challenging to articulate - Bootstrap 3

I'm at a loss for words when trying to describe what I'm attempting without simply showing you a picture: The issue I'm encountering is that the search box's height isn't fixed, and I might want to include other elements on the le ...

htmlcsstwitter-bootstrap-3

Navigation through dots on a single page

Having an issue with my dot navigation and anchor links placement. I want the anchors to be vertically centered in the middle of the section, regardless of window size. Here's what I'm aiming for : For larger windows : https://i.sstatic.net/pK4 ...

javascriptjqueryhtmlcssnavigation