title: How to set the image size same for portrait and landscape screen orientation in jquery mobile web application?
body: <p>I have to add image on the header and background I added header image using following code</p>
  
  <pre><code>&lt;div data-role="header" data-nobackbtn="false" data-theme="a" style="height:30px;background-image:url(test.jpg);background-repeat:no-repeat;"&gt;
  </code></pre>
  
  <p>the image perfectly fixed in the portrait but when the screen changed to the landscape, image  not fixed perfectly there will be some blank space added after the image. So how to set the image same for both portrait and landscape screen orientation. This problem occur in Android,iphone ,blackberry ,etc. For more clarification please check the image header.</p>
  
  <p><strong>actually when set the width: auto or 100% is not working ,because the image has some fixed width for example I set image width as 360 px in portrait ,when change to the landscape the image width still same thats the problem. We can't set the width large for landscape because we can't say that all platforms landscape mode screen size is same. that may be varying in Android,iphone etc.</strong></p>
  
  <p><img src="https://i.stack.imgur.com/oBXLr.png" alt="portrait"></p>
  
  <p><img src="https://i.stack.imgur.com/0xwbF.png" alt="Landscape"></p>