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

powershell Start-Process exit code -1073741502 when used with Credential from a windows service environment -

twig - Using Twigbridge in a Laravel 5.1 Package -

c# - LINQ join Entities from HashSet's, Join vs Dictionary vs HashSet performance -