Resize an image in HTML/CSS for mobile devices -


i have background image , can't figure out how resize mobile devices... i've tried everything! width: 100%, max-width: 100%; etc. height/cover thats affecting it?

.jumbotron {   background-image:url('http://www.part-box.com/images/yellow-frog.png');   height: 500px;   background-repeat: no-repeat;   background-size: cover; } 

media queries can solve this. calculate width mobile , other device.

 @media screen , (max-width: 1000px) {         .jumbotron {            background-image:url('http://www.part-box.com/images/yellow-frog.png');             height: 200px; // customize             background-repeat: no-repeat;             background-size: cover;               }     }   @media screen , (max-width: 300px) {         .jumbotron {            background-image:url('http://www.part-box.com/images/yellow-frog.png');             height: 500px; //customize             background-repeat: no-repeat;             background-size: cover;               }     } 

or can integrate html bootstrap makes code responsive across platforms.


Comments

Popular posts from this blog

twig - Using Twigbridge in a Laravel 5.1 Package -

jdbc - Not able to establish database connection in eclipse -

firemonkey - How do I make a beep sound in Android using Delphi and the API? -