Is it possible to determine the status of the cover by inspecting the element?

Recently, I've been contemplating the idea of adjusting my background image to move around a bit. It seems like a fancy concept and not too difficult to execute. However, I am facing an issue because my background image is currently set to cover (background-size:cover;).

Here are the CSS settings I have so far:

var pageElement = document.getElementById("page");
var curLeft = pageElement.style.left;
var newLeft = posIndex[current] * 10 ;

At this point, I only have access to the css setting for left. Is there a way to determine what 'cover' has done exactly? I would like to know if it has increased the height and width of the image by 20% or any other specific value, so that I can accurately adjust the image accordingly.

I suppose I could try to estimate with code or simply ignore it altogether, shifting the image based on width alone and trusting the rendering process to handle the rest.

javascriptcss

Answer №1

It seems like you are asking how to determine the change in image size using the "cover" behavior and the original image size as a reference point:

//Original dimensions
var imageSize={width:120, height:120};

//Calculate the difference between element dimensions and original size
var dimensionDifference={width:element.offsetWidth/imageSize.width, height:element.offsetHeight/imageSize.height}

//Select the higher value as the new image ratio
if(dimensionDifference.width > dimensionDifference.height) var imageRatio = dimensionDifference.width*100;
else var imageRatio = dimensionDifference.height*100;

Answer №2

I believe this information will be beneficial to you.

To increase its size, adjust the background-size to a percentage greater than 100%.

You can reposition it by using values ranging from 0 (left or top edge) to 100% (right or bottom edge).

@keyframes example {
  0% {
    background-position: 50% 50%;
  }
  20% {
    background-position: 0% 20%;
  }
  40% {
    background-position: 30% 100%;
  }
  60% {
    background-position: 100% 10%;
  }
  100% {
    background-position: 50% 50%;
  }
}
.img {
  width: 300px;
  height: 200px;
  animation: example 5s infinite;
  background: url(https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg) no-repeat;
  background-size: 120%;
  background-position: 30% 20%;
}
<div class="img">
  <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

Tips for creating distinct hover descriptions for each element in an array

My dilemma may not be fully captured by the title I've chosen, but essentially, I am working with a list of names and I want each one to display a unique description when hovered over with a mouse. On the surface, this seems like a simple task, right ...

javascripthtmljquerycss

Assistance needed for jQuery functions running too early

Within my click function, I am setting certain flags and then calling two functions. However, I want these two functions to execute sequentially in order after the flags have been set. jQuery("#element").click(function(e){ var op = jQuery("#box" ...

javascriptjquery

What could be causing setInterval to only run once?

setInterval is only running once for me. I tried using setTimeout and creating a loop inside the function, but it's still giving the same output. I'm working with brackets and using live preview, in case that matters. const buttons = document. ...

javascripthtml

Proceed with the second axios call only if the first one meets certain conditions

I am attempting to implement a feature where I can check the response object from the initial axios call, and if it is empty, proceed to the second call (otherwise, I will generate an error message). Essentially, the second axios call should only be trigg ...

javascriptvue.jsaxios

Exploring how to successfully test the parsing of a string using JSON.parse in Jest

Currently, I am in the process of creating unit tests for an API. In a scenario where I implement the following code: const apiResponse:object = JSON.parse(body) expect(apiResponse).toHaveProperty('error') If the API does not return JSON data, ...

javascriptjsontypescriptapijestjs

Retrieve and manage information from a database using node.js and express

I am currently working on developing a jQuery mobile application and have set up a Linux server with node.js and express. The authentication process seems to be working properly, as well as the connection to another database server. However, I am facing a ...

javascriptjqueryjsonnode.jsexpress

Challenges with CORS in AngularJS and Spring Security

I am currently in the process of setting up a module that combines Angular with Spring Security for user login and registration purposes. Everything seems to be working fine when I register a new user. However, I am encountering an error when the final ste ...

javascriptjavaangularjsspringspring-security

Uncaught ReferenceError: ajaxUrl is undefined

After pressing a green button on the website , instead of the expected popup image and email confirmation, I receive an error message stating "ajaxUrl is not defined". I have attempted to find a solution to this problem by searching on Google and Stackove ...

javascriptphpjqueryajaxwordpress

Flag is to be set while moving through the input fields

I am currently working on a form with multiple text fields and a text area. I have implemented a loop to go through each of these fields and check if there is a value present. If the field is empty, I set a flag to pass=false. On the other hand, if a value ...

javascriptjquery

employing animation and iterating through each one for dynamic effect

Javascript $(document).ready(function() { $(".container").animate({left:'120px'}, 6000).queue(function(next){ $(".child").css('display', 'none'); }); }); The provided code snippet demonstrates animating a single box and t ...

javascriptjquerycssanimation

Is there a way to retrieve both the items within a specific category and its corresponding subcategories simultaneously?

Presently, I am managing two models for Category and subcategory. The category model provides an array of data as shown below: category = [ {_id: '1', name: 'Appliances', slug: 'appliances'}, {_id: '2', na ...

javascriptreactjsredux

Incorporating a scrollbar into a CSS content accordion for enhanced user experience

Currently, I am exploring a tutorial for coding a content accordion which can be found here: I am wondering about the possibility of adding endless content to each section while incorporating a scroll bar. Any suggestions on how to achieve this? Apprecia ...

htmlcss

Guide on sending a request to an API and displaying the retrieved information within the same Express application

I recently developed a basic express app with API and JWT authentication. I am now attempting to enhance the app by incorporating page rendering through my existing /api/.. routes. However, I am facing challenges in this process. app.use('/', en ...

javascriptnode.jsexpress

Interested in concealing the delete and modify buttons of the formbuilder within the @formio/react component?

Reference Image const Formio = dynamic( () => import("@formio/react").then((module) => module.Form), { ssr: false } ); <Formio src={formJson} onSubmit={submitHandler} onChange={handleFormChange}/> In my Next.js project, I am us ...

javascriptreactjsnext.jsformbuilderformio

Isolate the express API database functionality from the server.js file

I am new to Node.js and have a question related to it. Here is the link to the example I am using: https://github.com/sahat/newedenfaces-react/blob/master/server.js The server.js file in this example contains code snippets like: mongoose.connect(config. ...

javascriptnode.jsexpressserver

Instructions on giving an identifier to a canvas element within a three.js project

In my three.js project, I have created a render object and connected it with DomElement as shown below: var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setClearColor( 0xAAAAAA, 1 ); renderer.setSize(window.innerWi ...

javascriptthree.jshtml5-canvas

A Guide on How to Sort and Tally Items in a JSON Data Set containing Numerous Objects using JavaScript

I have recently started learning javascript, and everything was going well until I encountered this issue. I need to reformat a JSON file in the following structure: { firstName: "Joel", lastName: "Munz", total: 154, transaction: "111111", ...

javascriptnode.js

What is the best way to display a specific object prop on a page after triggering the onChange() method from a selected

Looking to simplify some code that's become a bit overwhelming. My pizza order consists of arrays for size and price. I'm trying to update the price when a user selects a size, but I've been stuck on an issue with mapping pizzas from the ca ...

javascriptarraysreactjs

"Troubleshoot the issue of a Meteor (Node.js) service becoming unresponsive

Currently running a Meteor (Node.js) app in production that is experiencing unexplained hang-ups. Despite implementing various log statements, I have pinpointed the issue to a specific method where the server consistently freezes. Are there any tools beyo ...

javascriptfacebooknode.jsmeteor

React 16 is encountering a discrepancy due to the absence of the data-reactroot attribute

As I was in the midst of updating some apps to React 16, I couldn't help but notice that the data-reactroot attribute is no longer present on the main root element. Although not a critical issue, it seems like we had certain code and styles that reli ...

javascriptreactjs