I'm having trouble loading images for different screen sizes using only media queries. The image loads in the browser but doesn't display within the div container. I can't figure out what I'm doing wrong.
Here's the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link href="css/test.css" rel="stylesheet">
</head>
<body>
<pre>
<script src="Jarts.js"></script>
</pre>
<div id="skjd2344jd"></div>
</body>
</html>
Here's the CSS:
#skjd2344jd{
height: 100%;
width:100%;
}
@media only screen and (min-device-width: 480px){
#skjd2344jd {
background-image: url("../img/optimal_small.png");
background-repeat: no-repeat;
}
}
@media only screen and (min-width: 481px) and (max-width: 1600px) {
#skjd2344jd {
background-image: url("../img/optimal.png");
background-repeat: no-repeat;
}
}