Tips for adjusting background-image position after page scale increase

I have a div block with the specified styles:

.promo-blocks .first-appointment {
    background-image: url("../images/41d000_e4b9806a75b61053f1d6d4ccab8903df.png_srz_980_345_85_22_0.50_1.20_0 (2).00_png_srz");
    
    position: relative;
    background-color: #82B440;
    background-position: left;
    background-repeat: no-repeat;
    background-position-x: -97%;
    background-size: contain;

}

When I adjust the page scale to 75% or lower, my background-image shifts to the left side. How can I ensure that the background stays fixed at the left bottom position with consistent padding from the center text?

htmlcss

Answer №1

Implement this functionality using jQuery when the window is resized:

$( window ).resize(function() {
   var size = ...
   $(".promo-blocks .first-appointment").css("background-position-x",size);
});

You can calculate the value of size based on specific logic that you define.

For instance:

1) Track both the old and new sizes of the window during a resize event, then adjust the background position accordingly based on the difference between these values.

2) Consider using percentage differences in screen width to determine the appropriate background positioning.

Answer №2

I believe the problem lies within this particular line: 

background-position-x: -97%;

Have you attempted removing it?

You may also want to consider removing

background-position: left;

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

Modify the background color of one div based on the visibility of another div

My carousel consists of three divs representing a Twitter post, a Facebook post, and a LinkedIn post. These are contained within another div called #social-media-feeds. I am curious if it is feasible to adjust the background color of #social-media-feeds d ...

javascriptjqueryhtmlcss

Tips on how to change an image tag into a CSS selector

I need to change this tag to a WebElemet using CSS Selector instead of Xpath. I attempted with Xpath as shown below: panelSectionTitle.find( By.cssSelector( "img.aw-layout-right[style='']" ) ) <img style="" class="aw-layout-right" height="2 ...

htmlcssselenium-webdriver

When attempting to use the .split method, an error is thrown stating that addEventListener is not

I'm attempting to create a table that automatically fills in the next input when I select options from MySQL. However, when I run this code, I get an error saying "addEventListener is not a function." I'm not very familiar with JavaScript, so I&a ...

javascriptphphtml

Extracting text within quotation marks from HTML using Java and Selenium WebDriver

I encountered a piece of code that resembles the following: https://i.stack.imgur.com/gaX1J.png Although I am able to retrieve the link using the command System.out.print(link.getText()); it only returns the value "Saab". However, I also require the da ...

javahtmlselenium-webdriver

When an element is appended, its image height may sometimes be mistakenly reported as

I am dynamically adding divs and I need to retrieve the height and width of an image. Based on this information, I have to apply CSS to the MB-Container class. For example: if the image is portrait orientation, set container width to 100%. If it's ...

javascriptjqueryhtmlcss

Adjusting SVG size based on the position of the cursor for transforming origin

My goal is to scale an SVG circle using the trackpad (by moving two fingers up and down), with the origin of the transform being the cursor position. Initially, the scaling works as intended, but on subsequent attempts, the circle changes position, which s ...

javascripthtmlcsssvgcss-transforms

jQuery's slide toggle function is limited to toggling the visibility of just one section at

Welcome to my first post! As a newbie in web development, I have just started my first project. While I feel comfortable with HTML and CSS, jQuery is proving to be a bit challenging for me. In the head section of my intranet page, I have the following cod ...

jqueryhtmlcssslidetoggle

Interactive Div Updates Dropdown Selections Automatically

// function to add set of elements var ed = 1; function new_server() { ed++; var newDiv = $('#server div:first').clone(); newDiv.attr('id', ed); var delLink = '<a class="btn btn-danger" style="text-align:right;m ...

javascriptjqueryhtml

Retrieving script data from a webpage

I found a link that I want to extract content from, here is the link: https://www.whatever.com/getDescModuleAjax.htm?productId=32663684002&t=1478698394335 However, when I try to open it using Selenium, it doesn't work. It opens as plain text wit ...

pythonhtmlajaxselenium-webdriverweb-scraping

The production build for Angular 9 Keyvalues pipe fails to compile

After successfully running my app on the development server with ng serve, I encountered a failure when trying to build it for production. The error message that popped up was: ERROR in src/app/leaderboard/leaderboard.component.html(9,17): Argument of typ ...

htmlangulartypescriptangular-pipe

Leverage AngularJS to dynamically load CSS stylesheets using ng-repeat

I have organized my stylesheets into separate modules for each include, and I am trying to dynamically load them. However, I am facing some difficulties as when they are rendered, all I see is the following markup for each sheet that should be loaded: < ...

htmlcssangularjsheaderangularjs-ng-repeat

Using the class for jQuery validation as opposed to the name attribute

I am looking to implement form validation using the jquery validate plugin, but I am facing an issue with using the 'name' attribute in the html since it is also used by the server application. Specifically, I want to restrict the number of check ...

javascriptjqueryhtmlcssjquery-validate

CSS: Create a form with two input fields where the left field is adjustable in width and the right field fills up

------------- -------------------------------------------------- | some unique text | | some more original content, varying length | ------------- -------------------------------------------------- |<---------------------- 100% width ------------------ ...

css

Is there a way to retrieve the href attribute from an <a> tag using PHP?

Similar Question: Retrieving the href attribute of an Anchor Element Provided hyperlink $link="<a href='test.php'>test</a>"; Is there a way to extract href and anchor text using PHP? ...

phphtml

Error: The value for $regex must be in the form of a string

Encountering a problem with an error in the Console: { [MongoError: $regex has to be a string] name: 'MongoError', message: '$regex has to be a string', waitedMS: 0, ok: 0, errmsg: '$regex has to be a string', code ...

javascripthtmlajaxnode.jsmongodb

media query for css on windows 7 mobile devices

Is there a way to apply CSS media queries specifically for Windows phone 7? I have attempted the following code without success: @media only screen and (max-width: 480px) and (min-width: 5px) { // css here } Any advice or guidance would be greatly appr ...

csswindows-phone-7mobilemedia-queries

What is the process of combining JS functions with PHP echo in code?

I am currently working on creating a popout menu for an array of values that are being displayed from the database. The goal is to show the corresponding popout menu when the svg is clicked, but I am running into an issue where it only works for the first ...

javascriptphphtml

What methods do publications use to manage HTML5 banner advertisements?

We are working on creating animated ads with 4 distinct frames for online magazines. The magazines have strict size limits - one is 40k and the other is 50k. However, when I made an animated GIF in Photoshop under the size limit, the image quality suffered ...

javascripthtmlanimationgifanimated-gif

Would it be beneficial to assign a single class name to all elements with matching styles within a CSS framework?

Currently, I am in the process of creating my own CSS library or framework. However, I have encountered an issue where all 10 li tags share the same classes, such as .pl{ padding-left:10px} .mr{ margin-right:10px}, along with other necessary attributes. Wh ...

htmlcssfrontend

Uploading Images Dynamically with Ajax and jQuery in PHP

[Resolved Previous Issue] Recently, I obtained an image upload script that utilizes Ajax and jQuery. My goal is to restrict the maximum number of uploads to just 8 images. Any suggestions or advice would be greatly appreciated. Source of Download: ...

javascriptphpjqueryhtmlajax