Boostrap 3: How to give different images for (mobile/tablet) versions? - css

Question

I want to keep different background image for mobile version.I applied media queries but still its not taking.
CSS:
#banner{
margin:0 0 0 0;
padding:0 0 0 0;
background-image:url(images/bg.jpg);
background-repeat:no-repeat;
background-position:center;
position:absolute;
width:100%;
height:2816px;
}
#media (max-width: 480px) {
#banner{
background-image:url(images/cooper.png);
/*display:none; Doesnt shows anything*/
}
}
Any suggestions?

Answer 1

Its not working because you have not given size for bg-images as well as div#banner :
working fiddle
div, html, body {
width:100%;
height:100%;
}
#banner {
margin:0 0 0 0;
padding:0 0 0 0;
background-image:url(http://www.mpa-garching.mpg.de/galform/cr/CR_TCDM_dump40_400_170000_12000_100_blue.gif);
background-repeat:no-repeat;
background-size:100% 100%;
background-position:center;
position:absolute;
width:100%; /* u have set this here, so this is fine */
height:2816px;
}
#media only screen and (max-width: 480px) {
#banner {
width:100%; /* u have no set this here, so this is not working for you */
height:100%;/* u have no set this here, so this is not working for you */
background: red url('http://bingbangstudios.com/press/fork/fork_pixie_400x400.jpg');
background-size:100% 100%; /* notice this here too*/
/*display:none; Doesnt shows anything*/
}
}

Answer 2

Try this meta tag and media queries..
<header>
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
</header>
/* Smartphones (portrait and landscape) ----------- */
#media only screen
and (min-width : 320px)
and (max-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
#media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
#media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer 3

You don't need too much coding. Just code as follow-
#banner{
margin:0 0 0 0;
padding:0 0 0 0;
background-repeat:no-repeat;
background-position:center;
position:absolute;
width:100%;
height:2816px;
}
#media (min-width: 480px) {
#banner{
background-image:url(images/bg.jpg);
}
}
#media (max-width: 480px) {
#banner{
background-image:url(images/cooper.png);
}
}