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

How can you hide all siblings following a button-wrapper and then bring them back into view by clicking on that same button?

On my webpage, I have implemented two buttons - "read more" and "read less", using a Page Builder in WordPress. The goal is to hide all elements on the page after the "Read More" button upon loading. When the button is clicked, the "Read More" button shoul ...

javascripthtmlcss-selectorsevent-handlingdom-events

Running a continuous JQuery function loop

I need assistance with creating a continuous image fade in and out effect. Currently, my code looks like this: $(document).ready(function(){ $(".slider#1").delay(1000).fadeIn(2000); $(".slider#1").delay(1000).fadeOut(2000); $(".sli ...

jqueryhtml

"Efficiently Triggering Multiple Events with One Click in JavaScript

Hey everyone, I could use some assistance. I'm trying to execute multiple events with a single click. Currently, I can change the image in my gallery on click, but I also want to add text labels corresponding to each image. Whenever I click on a diffe ...

javascripthtmljquerycssdom-events

You are unable to select the element in IE if there is an image in the background

Apologies for coming back with the same question, as I realize now that I was not clear in my explanation yesterday. You can find the codepen here (please note that it may not open in IE8). My issue is with dragging the 'move-obj' element in IE b ...

javascripthtmljquerycssinternet-explorer

What's preventing my Angular list from appearing?

I am currently developing an Angular project that integrates Web API and entity framework code first. One of the views in my project features a table at the bottom, which is supposed to load data from the database upon view loading. After setting breakpoin ...

javascripthtmlangularjs

modifying the child divs contained in the main div

Hey there! I'm currently using Bootstrap to design an application and I've got the entire form inside a container. However, as I add more child elements within the container div, I would like the parent div to expand automatically to show all the ...

jqueryhtmlcsstwitter-bootstrap

Adjust the width of the initial column in the table and ensure it remains noticeable

I am a beginner with bootstrap and I find it extremely useful. I have encountered a problem with a table I am working on. I am trying to set the width of the first column and keep it always visible, but I am having trouble achieving this. I have successful ...

htmlcssbootstrap-4

Aligning a div element horizontally

I'm having trouble aligning the div element with the .slider class horizontally. The margin: 0 auto; property doesn't seem to be working. Additionally, I would like to know how to make the slider image responsive. /* CSS Document */ .header { ...

htmlcss

What is the best way to ensure a CSS element maintains its position margins even after adjusting them with JavaScript?

Currently, I am in the process of developing a minesweeper game using a combination of HTML, CSS, and JavaScript. The code snippet I am utilizing to generate the grid is as follows: <div id="game-space"></div> <script type="t ...

javascripthtmlcssfrontendbackend

Having trouble getting my jQuery fade in effect to work

I am having an issue with the fade in / fade out effect using jQuery. The Menu is rendering perfectly and functioning properly, but there is no delay or fade when hovering over the menu items. I'm not receiving any errors, but the expected behavior is ...

jqueryhtml

Rearrange the order of divs dynamically to prevent wrapping/overflow, no need for media queries

Can someone help me with this issue? I am trying to create a navigation bar with centered menus/links, a logo on the left, and call-to-action buttons and icons on the right. If the content overflows or wraps, I want the center column to move to the next l ...

htmlcssflexbox

Hover or click on HTML input type using CSS in your webpage

I am currently working on adding hover effects to my elements. I have successfully added a hover effect to the outer list item, but I am wondering how I can achieve the same effect on the <input> element instead of the <li>. ul.slides li:hov ...

jqueryhtmlcss

Should I create CSS rules for different screen sizes or should I dynamically render components based on the screen size?

As I delve into learning React, I find myself unsure about the most effective approach to make websites responsive. Currently, I am utilizing Semantic UI React as my CSS Library. While everything displays perfectly on desktop, I encounter some issues when ...

cssreactjssemantic-ui

Is it possible to use jQuery to dynamically set the line-height of nested objects in CSS?

I am in the process of creating a horizontal family tree. Where I'm At - I am currently working on setting the CSS Line-Height to vertically center each item based on nested content. The Issue - The Line-Height value for nested items keeps growing e ...

jqueryinheritancenestedcss

Modify the color of CSS for all elements except those contained within a specific parent using jQuery

I have a color picker that triggers the following jQuery script: //event.color.toHex() = hex color code $('#iframe-screen').contents().find('body a').css('color', event.color.toHex()); This script will change the color of al ...

javascriptjquerycssdom

Fetching dynamic information via AJAX for a jQuery tooltip

I have successfully loaded content via AJAX, including a UL element with li items that each have tooltips. Now I want to load tooltip content via AJAX for each individual li item. How can I achieve this? Currently, I am making an AJAX call to load the li ...

javascriptjquerycssajaxjquery-tooltip

The Jquery navigation and image display features are experiencing technical difficulties in Internet Explorer

My website is currently in the development stage and functions well on all browsers except for IE10. Interestingly, both the menu bar and photo gallery, which rely on Jquery, are not functioning properly in IE10. Below is the code snippet: <script ty ...

javascriptjqueryhtmlcssinternet-explorer

Turned off jquery on a specific div in order to resolve compatibility problems with Vue.js

Currently, I am working on a Drupal project which includes JQuery in all pages. We have recently introduced Vue.js for creating dynamic components directly in the HTML pages (not for building a single-page application). However, we are facing an issue whe ...

javascripthtmljqueryvue.js

Modern design featuring soft borders that blend into the background

I am in the process of bringing a unique webpage layout to life. The design is a bit unconventional, and I'm not sure if it's feasible. Essentially, I plan to have a fixed-width content box of 900px positioned in the center of the page body. I ai ...

htmlcsslayoutfluid

Submenu in submenu not registering CSS hover events

Currently, on a website project that I'm developing, there is a submenu nested within another submenu. Interestingly enough, the level-2 submenu happens to be taller than its parent level-1 submenu. To control the visibility of these submenus, I' ...

htmlcss