Determine the ratio of the background image

I am facing an issue with layering background-images on my webpage. I have a background-image named 1 at the bottom of the page, and I want to display another div with a background-image named 2 over the bottom 5% of background-image 1 (not the bottom 30% of the screen but bottom 30% of the image).

The main challenge is making this setup responsive. It seems like I need to calculate some sort of ratio, but I am unsure how to proceed. Below is the code that I currently have. Whenever I resize the screen, the size of background-image 1 changes, causing the position of background-image 2 to shift as well. How can I ensure that it remains fixed in one place regardless of screen size?

Check out the JSFiddle link for the code example: here

javascriptjqueryhtmlcssbackground-image

Answer №1

Give this a try. It appears to fulfill your needs and is adaptable.

$(document).ready(heroResize);
$(window).on('resize', heroResize);

function heroResize() {
  var marginTop = $(window).height() * 0.8;
  $('#layer2').css('margin-top', marginTop);
}
#content {
  position: relative;
}

.layer {
  width: 100%;
  height: 100vh;
  max-height: 1000px;
}

#layer1 {
  background: url('https://cliffsliving.com/wp-content/uploads/2018/02/CLIFFS_DevilsCourthouse_Shoot_2017_3740_cmyk_brighter_PJ.jpg') center top/contain no-repeat #6DB3F2;
  position: absolute;
  top: 0;
  left: 0;
}

#layer2 {
  position: absolute;
  bottom: 0;
  left: 0;
  background: url('https://www.pngtube.com/myfile/full/9-93924_png-parallax-background-png.png') center bottom/contain repeat-x;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <div id="content">
    <div id="layer1" class="layer">
      <div id="layer2" class="layer"></div>
    </div>
  </div>
  <div id="footer"></div>
</div>

Answer №2

It seems like you're looking to nest layer2 within layer1 and position it at the bottom using absolute positioning with a value of 0. This will ensure that layer2 always stays anchored to the bottom and is positioned relative to its parent, which in this scenario is layer1.

Answer №3

To achieve this effect, you can utilize a single element with multiple backgrounds and the `vw` unit, eliminating the need for JavaScript. The key is the value `0.877vw`, which represents 5% of the image height. Assuming the image has a ratio of `5.7` and a width equal to `100vw`, we can calculate it as follows: `0.05 * (100vw/5.7) = 0.877vw`.

body {
  margin:0;
}

.layer{
  height:100vh;
  min-height:60vw;
  background:
    url('https://www.example.com/image1.png') 
     bottom,
    url('https://www.example.com/image2.jpg') 
     bottom 0.877vw center;
   background-size:contain;
   background-repeat:no-repeat;
}
<div class="layer"></div>

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

Invoking a method in Vue.js from another component

I'm just starting out with VUE and I have a unique challenge for my project. I want to have a button on one page that triggers a function on another page. I know some may ask why not keep the button and function on the same page, but I am exploring ho ...

javascriptvue.jsvuejs2components

Managing data binding for checkboxes within a constantly changing set of options

I'm currently working on designing an angular directive for selecting items from a categorized list. Each item in the list should be selectable using a checkbox. The input data that will be provided to the directive looks something like this: [ { ...

javascriptangularjs

What is the best way to retrieve the value of a submitted button in a jQuery form submission?

I am facing an issue with my HTML code. Here is the structure: <form method="post" id="IssueForm" action="wh_sir_insert.php"> <input name='id[]' type='checkbox' class="selectable" value='$col[8]' /> <inpu ...

phpjqueryhtml

Having an issue where the Jquery clone function is only duplicating the content once. Looking to

I'm currently working on existing HTML table code. My goal is to copy the text from the 'th' header rows and paste them inside the corresponding td cells for each subsequent row. While I have successfully managed to copy the header row, it o ...

javascripthtmljquerycss

What is the process for enabling HTMLField in Django Admin and ensuring it is accurately displayed on the template?

One of the models in my Django app is for dorms and it looks like this: class Dorm(models.Model): dorm_name = models.CharField(max_length=50, help_text="Enter dorm name") dorm_description = models.TextField(max_length=1000, help_text="Enter dorm d ...

pythonhtmldjango

problem with passing the identification number into the function

I am facing an issue with passing the id into a javascript onClick method. I am using the Spring framework and in the controller class, I send the related id to the JSP file like this: model.addAttribute("uploadid", uploadid); Afterwards, I need to p ...

javascriptspring

What is preventing the execution of the bower update command in the Package Manager Console?

After encountering issues with upgrading the jQuery version in an existing project, I attempted to use Package Console Manager (PMC) to run bower update jquery --force-latest as well as bower update jquery. Unfortunately, both attempts were unsuccessful an ...

jquerybowerpackage-manager-console

Save information in a session using html and javascript

I'm having trouble accessing a session variable in my javascript code. I attempted to retrieve it directly but ran into issues. As an alternative, I tried storing the value in a hidden HTML input element, but I am unsure of how to properly do that wit ...

javascriptphphtmlsession

Tips for efficiently moving through divs in a personalized single page application?

Exploring the world of JS frameworks and single page app functionality is a bit of a mystery to me. Currently, I have a pseudo single page app set up without any specific framework in place. The setup involves 3 tabs that toggle visibility for 3 different ...

javascriptjqueryhtmlcssajax

Tips on incorporating a parent selector into a relative CSS selector in Selenium with Python

Let me do my best to articulate the issue. This inquiry pertains to selenium in Python. Take a look at this example: for row in driver.find_elements(By.CSS_SELECTOR, "div[style='overflow: hidden;'] > div > div:nth-child(3)"): ...

pythoncssseleniumxpathcss-selectors

Unable to make API call within ReactJs Component due to technical issues

I am brand new to react and I am coming across a few things that I don't quite understand (even after researching). So, I have decided to ask my questions here. Beforehand, I just want to apologize for my poor English and any potentially silly questio ...

javascriptreactjsapirest

Design a table without borders that is compatible for pasting into a Word document

I've been struggling to figure out the correct format for creating a border-less table that, when pasted in Word, will maintain its appearance as shown below: <strong>Foo</strong> <ol> <li value="0">This is zero.</li&g ...

htmlcssms-word

Updating a Hidden Field in SharePoint with jQuery

When attempting to set the value of a site column (field) using jQuery, I encountered an issue where it only worked when the field was not hidden. The code I used was: $("select[Title='MyID']").val(MyRelatedID); Upon further inspection, it ...

javascriptjquerysharepoint

Struggling with transitioning from table layout to CSS, specifically encountering difficulty in aligning all elements properly

Back in the "good old days," we used to simply put everything into td cells and it would all line up perfectly. Now, with CSS, things are a bit more complicated. I'm struggling with how to achieve a specific layout. What I want is to have text on the ...

css

What is the best way to target CSS only to elements that do not have a parent with a specific class?

Striving to preserve the existing CSS in the codebase. .my-new-class { .existing-class { ...implementing new styles } } .existing-class { ...maintaining old styles } I attempted a technique that I know won't work and understand why: ...

csssassancestor

What is the best way to show a locally stored image in a React application while using a local server?

I have come across a few discussions regarding the display of images in react, but none of them seem to address my specific issue. To start, I initiated a project using npx create-react-app, and then utilized the npm start feature that was included in the ...

htmlreactjsimagenpmcreate-react-app

What are some ways to improve performance in JavaScript?

Can you help me determine which approach would be more efficient - using native functions of the language that involve 2 iterations or a simple for loop? The goal is to locate the index in an array of objects where the property filterId matches a specific ...

javascriptarraysnode.jsperformance

The <script> element failed to close correctly

Within my default.jspx file, which serves as the foundational layout for the page, I am attempting to import several jQuery libraries. The code snippet looks like this: <head> ... <spring:url value="/resources/js/lib/jquery-1.9.1.min.js" ...

javascriptjqueryjspspring-mvcspring-roo

Steps to Remove JWT Authorized Information by Identifying Number

I am currently utilizing JWT to manage access control for an express and React ecommerce application. However, I am unsure about how to remove the currently logged in user from the application. I have attempted using arrow functions and a button onclick ha ...

javascriptnode.jsexpresse-commerceexpress-jwt

Reload entire page for AJAX request if JavaScript is not enabled

Currently utilizing JSF2. I have a button that triggers an action and then updates a section of the page (fairly standard). <h:commandButton value="foo" action="#{myBean.myAction}" > <f:ajax execute="@form" render="#content" /> ...

javascriptajaxjsfprogressive-enhancementgraceful-degradation