Retrieving the ACTUAL backgroundSize instead of relying on the relative values provided by the background-size CSS3 property

Is there a method to uncover the EXACT backgroundSize of an image in the background of an element?

CSS3 offers values like auto or percentage, but I'm interested in determining specific measurements (like 200px by 100px).

I am aware that one approach involves loading the background-image using the load() function on a hidden img element, then obtaining its height and width using browser functions or jQuery...

However, this method is slow since it loads the image again. Is there a way to retrieve the size from an already rendered background image element?

css

Answer №1

The CSS3 background-size property solely determines how the background image should be displayed, without any indication of the actual size of the image being referenced in the background-image URL. To ascertain the true dimensions of the image, it is necessary to load the image itself (which may or may not be retrieved from the browser cache). It's important to note that the background image does not form part of the document DOM.

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

Mastering the fundamentals of integrating/augmenting a fresh template in Umbraco

Let me be completely honest. Umbraco is unlike any other CMS I have worked with before. I am currently struggling to grasp the proper method of creating a Template and integrating it into Umbraco. How exactly can I add a template? I am making changes to t ...

.netasp.netcsscontent-management-systemumbraco

I seem to be having trouble with the Clearfix - the elements at the bottom are overflowing the container

Hey there! I'm having some trouble with my website, specifically at the bottom where the letters and hr line are overflowing the container. I thought about using a clearfix, but it doesn't seem to be working as expected. I even tried adding an ov ...

htmlcss

Applying Bootstrap classes to adjust font weight

Are there any pre-existing Twitter Bootstrap classes that can be used for styling font weight, such as font-weight: bold and other variations? I'd prefer not to reinvent the wheel if Bootstrap already has this capability. ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Square-shaped picture with Bootstrap 4 design

I need help making images of different sizes appear as squares in a preview on my webpage. /* This is the CSS code which sets automatic height: */ .preview-img { width: 100%; height: auto; object-fit: cover; } How can I adjust the image height bas ...

cssimagebootstrap-4image-resizing

Mozilla displays the background color even when the visibility is set to hidden

When working with CSS, I've noticed that when I use visibility: hidden on a <td> tag in Mozilla, the background color still shows. To see an example, visit this jsfiddle. It displays fine in Chrome but not in Mozilla. ...

htmlcss

Tips for populating a row in the Bootstrap grid with the assistance of the mr or ml classes

I've come across a roadblock here. The issue arises when attempting to fill the Bootstrap row while also utilizing mr (or ml). Initially, I attempted to calculate the numbers so that they add up to 12. In my 3-column layout, I have a column of 5, fol ...

cssbootstrap-4grid

The floating labels in Bootstrap do not support clicking anywhere on the text input field

After updating from bootstrap v5.3.0 alpha1 to v5.3.0 alpha3, I noticed a change in the form-floating feature. Previously, everything worked as expected, but now there are some areas where I can't click on the input fields when the floating label is a ...

csstwitter-bootstrapbootstrap-5

The height of a DIV element can vary based on

Looking at this div structure: DIV3 has a fixed height. The nested DIV5 will be receiving content from Ajax, causing its height to change. Additionally, there are some DHTML elements inside it that also affect the height. DIV5 has a fixed min-height set. ...

javascripthtmlcss

jQuery plugin: Dynamic text rotator with color transitions

For more information about the jQuery plugin, visit this page: https://github.com/peachananr/simple-text-rotator Here's a link to my Fiddle: https://jsfiddle.net/jzhang172/8msf91wa/ Make sure to check out my external Fiddle link, as the code here ma ...

javascriptjqueryhtmlcss

Merge the values from two input fields into another input field in lowercase separated by a dash

I have a dilemma with converting two text inputs into one lowercase textbox with dashes while typing, similar to the example below. <input type="text" name="first"> <input type="text" name="last"> My goa ...

javascriptphphtmljquerycss

What steps should I take to create this animation?

So here's my concept: I envision a circle div positioned in the center with multiple small lines extending outwards, resembling rays of sunlight. How should I go about achieving this effect? Would implementing JavaScript or utilizing CSS3 animations b ...

javascripthtmlcssanimation

Creating a selection area with CSS that appears transparent is a straightforward process

I'm currently exploring ways to implement a UI effect on a webpage that involves highlighting a specific area while covering the rest of the page with a semi-transparent black overlay, all using CSS only. What is the most common approach to achieving ...

javascripthtmlcss

What is the method for asynchronistically loading Material ui fonts?

When using Material-UI, the fonts block the rendering of the first page. If no fonts are loaded, Material-UI defaults to using the Helvetica font until Roboto is downloaded. /signup (localhost) …media/roboto-latin-500.4b218fc7.woff2 (localhost) - 76 ...

cssreactjsfontsmaterial-ui

The attempt to run 'setProperty' on 'CSSStyleDeclaration' was unsuccessful as these styles are precalculated, rendering the 'opacity' property unchangeable

I am attempting to change the value of a property in my pseudo element CSS class using a JavaScript file. Unfortunately, I keep encountering the error mentioned in the title. Is there any other method that can be used to achieve this? CSS Code: .list { ...

javascriptcssgetelementbyidpseudo-elementgetcomputedstyle

Creating a dynamic side navigation similar to Gmail using Bootstrap 5

Is there a way to achieve a Gmail-style side menu in a Blazor Server application (using .NET 6 Blazor Server) where only icons are initially displayed, and hovering over the menu expands it to show names without reducing the main body section width? Below ...

cssasp.net-corebootstrap-5blazor-server-side

Tips for effectively utilizing innerHTML in this particular scenario

For an assignment, we were tasked with creating a Madlib game where users input words into textfields to replace certain words in a hidden paragraph within the HTML using JavaScript and CSS. The paragraph embedded in the HTML page is as follows: <span ...

javascriptjqueryhtmlcssinnerhtml

Button fails to align properly on smaller screens

I am facing an issue with the alignment of a form on different devices. The form looks correct on larger devices, like PC monitors, as shown in this image: https://i.sstatic.net/FiEyt.png However, on smaller devices, it appears like this: https://i.sstati ...

htmlcsstwitter-bootstrap-3

Hover to reveal stunning visuals

Can anyone help me figure out how to change the color of an image when hovered over using HTML or CSS? I have a set of social network icons that I want to incorporate into my website, and I'd like the icon colors to change when the mouse moves over th ...

htmlcsshovermousehover

Generating an interactive Datepicker using Jquery

How can I design a dynamic date picker similar to the image provided below? https://i.sstatic.net/euoNI.png I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The ...

javascriptjqueryhtmlcsstwitter-bootstrap

Update the CSS styles using jQuery

I am looking to update the content within a CSS tag using jQuery. In this instance, I need to change "My content" to "New Content". Here is the CSS code I have: a.appari:focus:after{ background: #333; background: rgba(0,0,0,.8); border-radius: 5px ...

javascriptjquerycss