'Resize an image in HTML/CSS for mobile devices

I have a background image and I really can't figure out how to resize it for mobile devices... I've tried everything! Width: 100%, max-width: 100%; etc. Is it the 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;
}
htmlimage


Solution 1:[1]

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS:

width: 100vw;

Adding a viewport and using vw allows you to size elements relative to the total width of the screen. Eg. 100vw takes up the full width of the screen, regardless of it's size.

If the screen is 430px wide, it'll be 430 pixels wide. Screen is 1200px wide, so will the element be.

1vw is 1% of the total screen width.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rose Bliki Personal

Related Questions