Although I am not a front-end developer, I ventured into creating a simple one-page website with an image. To ensure faster loading on smaller screens, I made multiple versions of the image to minimize the amount of data being downloaded. The image is intended to expand horizontally, so I also designed background images that would repeat horizontally. Take a look at the mockup below:
https://i.sstatic.net/Wk00V.png
I have shared the code that I have written. Can you confirm if this is the correct approach? Is there any issue in my code or is it the right way to utilize viewports? While it functions well on my 320px iPhone screen, I am facing difficulties making the 320px version work on my desktop browser. Overall, I am not completely satisfied.
HTML:
<div id="image" class="fluid-container">
<center>
<picture id="banner">
<source media="(max-width: 320px)" srcset="320w.jpg">
<source media="(min-width: 1200px)" srcset="1200w.jpg">
<source media="(min-width: 800px)" srcset="800w.jpg">
<source media="(min-width: 480px)" srcset="480w.jpg">
<img src="800w.jpg">
</picture>
</center>
</div>
CSS:
<style>
#image {
background-image: url("r320w.png");
background-repeat: repeat;
}
@media (min-width: 480px) {
#image {
background-image: url("r480w.png");
background-repeat: repeat;
}
}
@media (min-width: 800px) {
#image {
background-image: url("r800w.png");
background-repeat: repeat;
}
}
@media (min-width: 1200px) {
#image {
background-image: url("r1200w.png");
background-repeat: repeat;
}
}
</style>