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
Post a Comment