Dynamic background featuring a tall vertical image

I have an image that is extremely long, measuring 2263 x 8192 pixels. I want to design a website with a background that spans the width of the window and the full height of the image, all while maintaining responsiveness.

The concept is to have this elongated scrolling image split into sections with fixed heights. Similar to a landing page with various sections, but instead of individual backgrounds for each section, I prefer to use one continuous image.

Do you have any suggestions on how to achieve this?

jqueryhtmlcssimage

Answer №1

body {
    width: 100%;
    height: 100%;
    background: url('http://i.imgur.com/WfkIpCq.jpg') no-repeat;
    background-size: cover; 
    color: #fff;
}

Check out this amazing code snippet on JSFiddle! https://jsfiddle.net/f1zu318n/

Answer №2

padding-top:0;
padding-left:0;
padding-right:0;
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

Excessive white space within a relative block div causing the content to appear smaller in comparison

Currently, I am developing a straightforward form that includes CSS-based help boxes. These help boxes are designed to appear when the user hovers over the corresponding row. After leaving my project untouched for a few days, I encountered some bugs upon ...

htmlcss

The Jquery bind function does not work as expected when trying to handle 'ajax:success', 'ajax:error', or 'ajax:complete' events after submitting a form

After implementing the jQuery bind method, I am facing an issue where the 'ajax:success', 'ajax:error' or 'ajax:complete' callbacks are not being triggered. The form is submitted via Ajax and the data gets inserted into the da ...

jqueryruby-on-railsajaxruby-on-rails-3devise

Error with Flask url_for when trying to play a video

I'm currently developing a Flask website and working on analyzing and displaying a video on the webpage. However, when I tried to input the direct path to the video source, it only displayed a black screen. I searched on Google, which suggested using ...

pythonhtmlflask

Tips for assigning dynamic #id(*ngFor) and retrieving its value in Angular2

In my HTML file, I have the following code snippet: <tr *ngFor="let package of packages"> <td *ngFor="let coverage of coverages"> <input type="hidden" #dynamicID [value]="coverage.id"> <-- Include an identifier with the vari ...

htmlangulardata-binding

Error: The specified module is missing an export that was requested

Hello, I encountered an error in my console that reads: "Uncaught SyntaxError: The requested module './components/tileHeader/controller.js' does not provide an export named 'tileHeader'". Below is the code snippet causing the issue: co ...

javascripthtmlvue.jsvuejs3

Creating a stroke in SVG using JavaScript

I created a code that inserts a line into my svg page when I press a button Here is the html snippet: <body> <svg width="500" height="400"> </svg> <button id="btn1">Append text</button> </body> Below is the script us ...

javascripthtmlsvg

Looking to attach the "addEventListener" method to multiple elements that share the same class?

I'm trying to use an event listener in JS to handle the logic in the "onClick" function, but it's only executing once. I've applied the same class to all four buttons, so I'm not sure why it's only working for the first one. HTML: ...

javascripthtmladdeventlistenerdom-eventsevent-listener

Scroll through the div to quickly find the relevant content

I have implemented the following HTML structure: <div style="height:200px;overflow-y:scroll;"> <table>.....</table> </div> By using this setup, I am aiming to replicate the functionality of an expanded <select> control wit ...

javascriptjqueryhtmlcssscrollable

Difficulty with making dropdown options in Jquery function correctly on IE and Chrome browsers

Currently, I am utilizing multiple drop-down menus to toggle the visibility of rows in my table. For example: <select name="kp1_action" class="longboxsmall"> <option class="hidenextrow" value="">Button Disabled</option> <opt ...

jquerydrop-down-menuhtml-tablecross-browsershow-hide

Disabling the default behavior using preventDefault does not have an effect on ajax requests

I'm having an issue with my preventDefault event not working and I can't figure out why. I've searched around but haven't been able to pinpoint the problem. If there's a solution out there, please forgive me! Here's the code I ...

jqueryajax

Using dynamic forms with HABTM relationships

The application I'm developing involves Reports, Sections, and Writers. A Report has multiple Sections and Writers. Sections and Writers have a many-to-many relationship because a writer can write several sections, and a section can be written by mul ...

jqueryruby-on-rails

Ways to ensure text fits nicely within a container: HTML & CSS

Below is a code snippet: @import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans'); .square { max-width: 460px; background: white; border-radius: 4px; box-shadow: 0px 5px 20px #D9DBDF; -webkit-transition: all 0. ...

javascripthtmljquerycsssass

Modifying button appearance upon clicking using JavaScript

JavaScript: const buttons = document.getElementsByClassName("togglebtn"); for (let i = 0; i < buttons.length; i++) { buttons[i].onclick = function () { this.classList.toggle("active"); } } html: <md-butt ...

javascripthtmlcssangularjs

Tips for keeping a Youtube video playing even after the page is refreshed

Is it possible to save the current position of a Youtube video and have it resume from that point when the page is refreshed, instead of starting from the beginning? I am considering using cookies to store the last position or utilizing GET. Although my w ...

javascriptjqueryhtmlajaxyoutube

Maintaining content after page refresh with jQuery Ajax

Utilizing jquery and ajax in my project. Here's a snippet of the code I plan to implement. If I refresh the page after receiving a response (in this case, a form), I lose all the content. Is there a way to store/cache the response data in a variable s ...

jqueryajax

Ways to bypass browser pop-up blockers when using the window.open function

I am displaying an HTML retrieved from the backend. printHtml(htmlContent) { var windowToPrint = window.open('', '_blank'); windowToPrint.document.write(htmlContent); setTimeout(function () { windowToPrint.document ...

javascriptjquerytypescriptbrowsercross-browser

The jQuery AJAX request returned a JSON result that was labeled as 'undefined'

Having trouble retrieving JSON data with Jquery? If you're seeing 'undefined' results, try using the following code to display the JSON: alert(data); If you're unable to access specific fields like 'first_name', try this ins ...

phpajaxjsonjquery

Tips on adjusting a position that shifts with changes in window size

Working on a website for my grandpa, I'm planning to include a small biker character that runs across the screen. When hovered over, he stops and advises "wear a helmet." The animation works well, but there's an issue with the positioning when th ...

javascripthtmlcssanimation

Incorporating form fields for editing into Symfony 2's database

Can someone help me troubleshoot my issue with Symfony2? I'm new to this framework and struggling with a problem in my twig file. I have a form where I enter a test name and the names of its categories, along with a color for each category. However, w ...

phpjquerysymfonytwigsymfony-2.1

The ajax keypress event is malfunctioning and the ActionResult parameter is failing to capture any data

I am facing an issue where I want to update the value of a textbox using AJAX on keypress event, but the controller is not receiving any value to perform the calculation (it's receiving null). <script> $('#TotDiscnt').keypress(fu ...

javascriptjqueryajaxasp.net-mvcasynchronous