How to display image for multiple devices? - html

Question

I have a floating banner I want to display over 50% of the width of large screens and 100% of the width of small screens (mobile devices).
The image is sometimes very small (I think on retina displays).
How can I improve my code to display correctly on retina displays, large screens, and small mobile device screens?
In the .css
.banner-sticky {
bottom: -2.5px;
left: 0px;
width: 100%;
text-align: center;
background: rgb(0, 0, 0) transparent;
background: rgba(0, 0, 0, 0);
/* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/
}
.advert-img {
width: 50%
height: auto;
}
#media screen and (max-width: 380px) and (orientation: portrait) {
.advert-img {
width: 100%;
}
}
In the .html file
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.
.
.
<div id="sticky" class="banner-sticky" style="position: fixed;">
<a id="ad-link" href=' #' ><span id="banner-ad"><img src=' foo.jpg' class="advert-img" /></a>
</div>
'<a id="ad-link" href=' + this.landingUrl + ' ><span id="banner-ad"><img src=' + this.imgSrc + ' class="advert-img" /></a>'

Answer 1

You can use CSS media queries to distinguish the screen width, like this:
body {
background: url(foo-small.jpg);
}
#media (min-width: 500px) {
body {
background: url(foo-medium.jpg);
}
}
#media (min-width: 800px) {
body {
background: url(foo-large.jpg);
}
}
In order for this to work, you need to set the image as background in CSS, not as a <img> tag

Answer 2

Try using background-size css rule for every resolution
body {
background: url(foo-small.jpg);
}
#media (min-width: 500px) {
body {
background-size:50%;
}
}
#media (min-width: 800px) {
body {
background-size:80%;
}
}