Utilizing jQuery for dynamic horizontal positioning of background images in CSS

Is there a way to set only the horizontal background property? I've tried using background-position-x and it works in Chrome, Safari, and IE, but not in Firefox or Opera.

Additionally, I would like to dynamically set the left value of the position.

var ppp = 10px;
var pLeft = ppp+' top";
jQuery(".bg-test").css("background-position" , pLeft );

Update

var ppp = jQuery(".someClass").width();
var pLeft = ppp+' top";
jQuery(".bg-test").css("background-position" , pLeft );

Check out this JSFiddle for more information!

Answer №1

One way to achieve this is:

$('.bg-test').css('backgroundPosition','left top');

Another option is to use a dynamic value:

$().ready(function() {
    var leftPos = 10+2+5+'px';
    $('.bg-test').css('background-position', leftPos +' bottom');
});

For more details, check out the updated fiddle

Answer №2

Implementation:

background: url(http://icons.website.com/files/icons/1245/tools_rotate_clockwise/128/object_transform_right.png) 50px 20px no-repeat #f60;
,

check out http://jsbin.com/eXAS12b/7/

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 responsive YouTube video embed within a div container with a fixed background image

Hello there, I'm currently working on positioning the YouTube Iframe on the background to make it look like the video is playing on a laptop screen. I also want it to scale down appropriately with the background image on different resolutions. The w ...

Fill in the select dropdown menu

I am trying to trigger the population of a select dropdown when the user clicks on it. The issue I am facing is that the click handler seems to be activated only when the user clicks on the options within the select, whereas in my case there are no optio ...

Testing the ControllerAs syntax when dealing with forms in AngularJS

I am currently facing a situation with Angular that has left me quite puzzled. Controller function Controller () { // form used in template this.form ... } Template containing a form and utilizing the above controller Template <div ng-contr ...

Prevent the unwanted 100 Continue behavior in Ajax requests

My Javascript application sends out large POST requests to a backend server. Due to the fact that we need all requests directed to our non-public endpoint and the load balancer/proxies struggle with the Expect: 100-Continue header, I am seeking a way to pr ...

Turning a lambda function into a function that is compatible with next.js API: A step-by-step guide

I am currently using an Instagram API to retrieve data from my personal profile, which is triggered by a lambda function on Netlify. Here is a snippet of the code: require('isomorphic-unfetch') const url = `https://www.instagram.com/graphql/quer ...

Tips for successfully passing an array containing multiple values within the jsPDF body

I'm experimenting with jsPDF to showcase a list of products that users have ordered. I've managed to set up my columns and generate the PDF for download, but I'm facing some challenges with populating the body section. When attempting to sen ...

Creating HTML elements using JavaScript compared to importing an HTML fileIn JavaScript,

I am currently in the process of building a website that is entirely driven by JavaScript. Aside from the index page, I do not use any HTML pages at all. Instead, I fetch JSON data for every query and then dynamically generate HTML within the JavaScript to ...

Enigmatic void appears above row upon removal of content from a single item

When I click on an item in my grid, the content of that item is moved to a modal. The modal functions properly, but I noticed that when the content is removed from the item, a space appears above it. I have found that using flexbox could solve this issue, ...

There was an error in parsing the JSON data due to an unexpected token "u" at the beginning of the string

I've been working on improving my JavaScript skills, but I hit a snag with an error message that reads "Uncaught SyntaxError: Unexpected token u in JSON at position 0 at JSON.parse". var requestData = new XMLHttpRequest(); requestData.open('GET& ...

How can I retrieve values from HTML5 data attributes using Selenium in Python?

How can I extract the value "165796011" from data-gbfilter-checkbox? I attempted to do so using the following code: element= driver.find_element_by_css_selector('#widgetFilters > div:nth-child(1) > div.a-row.a-expander-container.a-expander-inl ...

Unable to access attributes of null (reading 'title) and other information

When the parameter 'edit=true' is present, I expect a form with pre-filled data to render; otherwise, redirect me. However, I am encountering an issue where I keep getting redirected and receiving a console error stating 'Cannot read propert ...

Problem with character encoding in Node.js

I am encountering an issue while retrieving data from a request, as the formatting or encoding is not matching my requirements. Attempted to address this by setting the encoding with req.setEncoding('utf8') The expected string should appear as: ...

Is it possible to pass parameters in the .env file in Node.js?

I am storing my file users.env inside routes/querys/users.env module.exports = { GET_USERS: "SELECT * FROM users", CREATE_USER: "INSERT INTO users ("id", "first_name", "last_name", "active") VALUES (NULL, '%PARAM1%', '%PARAM2%', & ...

Having trouble fetching results from AJAX objects using vanilla JavaScript?

I am currently working on developing my own AJAX prototype without relying on jQuery or any other libraries. However, I am facing an issue where I cannot retrieve any results and the breakpoint set on a specific line is not triggering: The problem seems t ...

use ".otherwise" or /** with the latest version of Angular2 Router to redirect non-routes using wildcards

Can anyone provide guidance on using wild cards to route in the new Router when a non functional route is specified? Similar to the .otherwise method in Angular 1.X router or /** in previous beta router. Additionally, any example or Plunker code would be ...

Assign a class to each offspring of a slot

I am currently in the process of setting up a component with a slot that, upon rendering, adds a specific class to each child within that slot. To simplify: <template> <div> <slot name="footerItems"></slot> </div> ...

Can a gulpfile be written in ES6 syntax?

Question: Is there a way to write my gulp file in ES6 to utilize import instead of require, and use => syntax in place of function()? I have the option to use io.js or any version of node.js. gulpfile.js: import gulp from "./node_modules/gulp/index.j ...

Encountering a "Cannot GET /PATH" error while developing a NUXT application due to a DOT present in

In my nuxt application, I encountered a peculiar issue. When I execute npm run dev, everything functions properly. However, after running npm run build and then npm run start, I face the error message stating cannot GET [path of the page here] I noticed t ...

Utilizing AJAX and JavaScript to generate a table using the AJAX response and placing it within a <div> element

I am currently passing the response of this action in text form, but I would like to display it in a table format. Is there a way to do this? function loadAditivos(){ $('#aditivoAbertoInformacoesTexto').html('<div id="loaderMaior ...

Grid alignment issue with images on Bootstrap 4.0 - resolution needed

Currently, I am working on a mini project that involves recreating a website using Bootstrap 4. I am at a stage where I need to display three images in a grid format with two on the top and one on the bottom. The challenge is to make the top two images eve ...