I want to know if it is possible for my front page to load an image dedicated for mobile users only. I know it is possible with javascript, but I want to know if I can achieve the same using CSS only. I have tried to do some research but can't find what I am looking for. I do not mean resizing the image based on the screen size, but loading a mobile-friendly image.
Make use of media query
to change background-image
at different screen resolutions
as below,
div{
width:100%;
height:400px;
background:url('http://placehold.it/350x150/f22/fff');
background-size:100% 100%;
}
@media screen and (max-width : 480px){
div{
background:url('http://placehold.it/480x150/f12/fff');
background-size:100% 100%;
}
}
@media screen and (max-width : 320px){
div{
background:url('http://placehold.it/320x150/e12/fff');
background-size:100% 100%;
}
}
<div></div>
Check this jsFiddle.
You can use media queries to apply classes depending on the screen size.
#img {
display: none;
}
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
#img{
display: block;
}
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
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