Displaying none in CSS

When we apply display:none rule using CSS we can hide HTML elements. Although you can hide an element from the frontend view using display:none property, this doesn't prevent the object from being downloaded to mobile devices. As a result, these elements will slow down your mobile site or application.

However, if you are going to hide an image from mobile devices and your intention is to remove it completely from mobiles, there is a method that you can use. For example, to hide an image from being displayed, we use the following code:

<div style="display:none;">
<img src="myimage.jpg" alt="" />
</div>

However, this method doesn't prevent it being downloaded to the device. To avoid this, we can use this image as a DIV background and hide it using CSS:

<style>
.imagehide {display: none;}
.mybackground {background: url(myimage.jpg) no-repeat; }
</style>

<div class="mybackground imagehide"> </div>

Using the preceding method, we can...