Menu
I am not in any way a front-end dev, but I am writing a simple one-page website which contains an image. I have create few versions of this image to minimize the bits to be downloaded in small-screen devices. This image is supposed to be "expanded" horizontally, so I also created some background images which are supposed to be repeated horizontally. See below mockup:
Below the code which I wrote. Is this the correct approach? Is there any bug in my code or is this the correct way to use viewports? Although it works fine on my 320px iPhone screen, I can't get the 320px version to work on my desktop browser. Overall I am not 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>
378
Have a look at this pen : https://codepen.io/anon/pen/XqJRKM
Essentially, the solution is:
#image {
background-image: url("http://lorempixel.com/output/sports-h-c-1-480-10.jpg");
background-repeat: repeat;
background-size:contain;
width: 100vw;
background-color:#f00;
}
@media (min-width: 480px) {
#image {
background-image: url("http://lorempixel.com/output/sports-h-c-1-480-5.jpg");
background-repeat: repeat;
}
}
@media (min-width: 800px) {
#image {
background-image: url("http://lorempixel.com/output/sports-h-c-1-480-6.jpg");
background-repeat: repeat;
}
}
@media (min-width: 1200px) {
#image {
background-image: url("http://lorempixel.com/output/sports-h-c-1-480-7.jpg");
background-repeat: repeat;
}
}
#image img{
width:80vw;
height:auto;
max-width:1200px;
}
html :
<html>
<div id="image" class="fluid-container">
<center>
<picture>
<source media="(max-width: 600px)" srcset="image1.png">
<source media="(min-width: 600px) and (max-width : 800px)" srcset="image2.jpg">
<source media="(min-width: 800px) and (max-width : 1200px)" srcset="image3.png">
<source media="(min-width: 1200px)" srcset="image4.jpg">
<img src="original_image.jpg">
</picture>
</center>
</div>
Note that with this example, original_image.jpg will only show on old browsers. It will always be overwritten on browsers above Chrome v38
70
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
