What is the reason for background images not loading when using `display: none`?

I'm really struggling to understand this puzzle:

When the page loads, will mypic.jpg be downloaded by the browser?

#test1 {
    display: none;
}
#test2 {
    background-image: url('http://www.dumpaday.com/wp-content/uploads/2017/01/random-pictures-116.jpg');
    visibility: hidden;
}
<div id="test1">
    <span id="test2"></span>
</div>

The answer is no. But why? When I try the above code, the image doesn't load. Yet, it does load when I switch to display: block;

Could this be related to preserving space for an element using hidden visibility?

I'm also puzzled because a previous question claims that using display: none does load the background image if there are no hidden descendants, while this discussion suggests browsers may prevent such loads. So, what's the truth here?

htmlcss

Answer №1

It piqued my interest because I was unaware of this particular detail. It appears that if the item or one of its parent elements has a CSS property of display: none, the image will not load. Could this be attributed to advancements in browser technology? I decided to delve deeper into the matter by conducting the following experiment:

#test1 {
    display: none;
}
<div id="test1">
   <img src="http://www.dumpaday.com/wp-content/uploads/2017/01/random-pictures-116.jpg"/>
</div>

Upon inspecting the Network tab in the developer tools, it became evident that the image did indeed get loaded despite the element being hidden. This observation contrasts with the example provided earlier. My hypothesis is that setting display: none renders the element invisible (a fact), resulting in no styles being applied to either itself or its children (theory). Essentially, background-image: url('...'); may not be processed since there is no visual need for applying the style due to the element being hidden.

I trust that this explanation clarifies things for you :)

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

React - Issue with automatic resizing of divs

Currently, I am delving into the realm of ReactJS and have embarked on a small project to enhance my skills. My main goal is to create a resizable div element that can be adjusted by dragging it across the screen. Here is the snippet of code that I have be ...

htmlcssreactjsreact-hooksresize

CSS for Adjusting Parent Height Based on Child Content

I've been working on adjusting the height of the parent class to fit the child class perfectly without overflowing Here is a snippet from my CSS file: Parent &__video position: relative; width: 471px; background: red; border-radius: 12px ...

cssvue.js

Increase ng-grid row height dynamically based on content without any external plugins or reliance on jQuery

I came across a similar question on this topic at Angular ng-grid row height However, none of the solutions provided there meet my requirements. If I use CSS to fix the issue, it impacts the page's responsiveness and disrupts ng-grid's header fu ...

javascriptcssangularjsng-gridrow-height

Monitoring user clicks using JavaScript code implemented

Currently, I am utilizing a JavaScript file to load on certain pages in order to track various events. Within this JavaScript file, there is a collection of selectors that have listeners attached to them. When these selectors are clicked, the tracking AP ...

javascripthtml

Customize the colors of the arrows in Bootstrap's carousel

There seems to be a simple solution that I'm missing here. I have images with white backgrounds and I want to customize the arrows on Bootstrap's Carousel to make them more visible. I need help changing the color of the arrows (not the background ...

htmlcsstwitter-bootstrapbootstrap-4carousel

What occurs when Click events are triggered on an <object> element?

I have set up a div, and inside that container, I embedded an SVG image using object (which I plan to manipulate later...). <div id="click-me"> some random Text <object data="some.svg" /> </div> Next, I added event listeners for t ...

javascripthtmlsvg

Stylesheet failing to respond to CSS Media queries

I have looked at other questions with similar issues and it appears that what's missing in their code is: <meta name="viewport" content="width=device-width, initial-scale=1"> However, I already have this code implemented but still facing probl ...

htmlcss

I'm encountering an issue with VS Code where it is unable to identify ejs tags within my project

I'm running into an issue with Vs code where it's not recognizing ejs output tags when they're inside an html tag, like in the input tag below : <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form. ...

javascripthtmlnode.jsexpressejs

Overlap bug with Flash content

In both Google Chrome (16.0.912.75 m) and Safari (5.1.1), I am encountering the well-known flash / html overlay issue. Despite setting the wmode attribute to transparent as suggested here and here, along with trying opaque, the problem persists. Following ...

htmlflashgoogle-chromez-indexwmode

Although PhoneGap resolution remains consistent, the outcomes may vary

I seem to be facing a similar issue as discussed in this post on Stack Overflow: Screen Resolution On A PhoneGap App My problem is that I have both an iPad and an Android tablet, both with a resolution of 1024 pixels across. However, while my screen displ ...

androidioscsscordovajquery-mobile

Implementing a class change to anchor elements when rearranging them

I have 4 divs and their corresponding anchor tags. The active class is dynamically added to anchors on scroll unless the order of the display elements changes. In that case, active classes are only applied to the sorted elements. I also sorted the nav anch ...

htmljqueryless

The hamburger menu unexpectedly appears outside the visible screen area and then reappears at random intervals

My website has a hamburger menu for mobile devices, but there's a problem. When the page loads on a small screen, the hamburger menu is off to the right, causing side scrolling issues and white space. I thought it might be a CSS problem, but after exp ...

javascripthtmlcss

What is the best way to dynamically link an Angular Material table with information pulled from the backend server

I am attempting to connect a mat-table with data from the backend API following this Angular Material Table Dynamic Columns without model. Below is the relevant content from the .ts file: technologyList = []; listTechnology = function () { ...

javascripthtmlangularangular-material

Get rid of the margins on your Wordpress theme

Currently, my Wordpress site is using the Tesseract theme which can be found at (http:// instantiwebs . com) I am interested in removing the left/right margins on all elements, similar to what has been done on this website: . Interestingly enough, they al ...

htmlcsswordpressmargins

What is the best way to implement individual fade-ins for each image in my project?

Regular Whenever I hover over one image, all images fade together. I'm not sure how to prevent this effect from occurring simultaneously. Any assistance would be greatly appreciated. Link to my stylesheet Link to my index page I have attempted to f ...

html

Inject a dynamic URL parameter into an iframe without the need for server-side scripting

I'm really stuck and could use some assistance with the following issue, as I am unable to solve it on my own :( When a user is redirected to a form (provided via an iframe), there is a dynamic URL involved: website.com/form?id=123 The code resp ...

javascripthtmlurliframedynamic

Having difficulty changing placeholder text style in Scss

I'm a newcomer to SCSS and I'm attempting to customize the color of my placeholder text from light gray to dark gray. Below is the HTML code snippet: <div class="form-group"> <textarea class="thread-textarea" ng-maxlength="255" ma ...

csshtmlsass

Inline display with automatic margin

I am seeking guidance from someone with more experience to help identify the source of this margin. Your assistance is greatly appreciated! https://i.stack.imgur.com/46k7k.png Below is the CSS code in question: .logo-icon { background-image: url(&ap ...

htmlcss

Ways to reload the page following the submission of a form

I implemented a fade dialog to present a form, and successfully submitted the form using ajax to create a new record in the database. Now, I am facing an issue where I cannot refresh the page after the ajax call finishes. Despite attempting to use JavaScr ...

javascripthtmlajax

"Click to view the latest data visualization using the Chart.js

I am exploring ways to enhance the animations in Chart.js for a new web project. The content is organized in tabs, with the chart displayed on the third tab out of four. Currently, the chart animates upon loading. How can I make it so that when #chartTrig ...

javascriptjquerycsschartschart.js