Here is the CSS code I am using:
html {
background: url(../img/header_mobile.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
html {
background: url(../img/header_tablet.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
}
If my screen width is larger than 768px, the browser loads header_tablet.jpg only. Is there a way to force the browser to load header_mobile.jpg before using media queries?
Edit: Currently, this is what I am doing:
<script type="text/javascript">
$(window).bind("load", function () {
if ($("html").width() > 767) {
$('html').css('background-image', 'url({{ site.url }}/img/header_tablet.jpg)');
}
});
</script>
I am trying to find a solution with media queries where on mobile, only the small picture is loaded. On tablet, start loading the mobile image and then load the bigger image.