How to ensure the background image inside a DIV is evenly shown

Answer 1

What I would do is create a background image that works well as a repeated pattern (tileable) and then use the border-radius property to get the rounded corners.

In this method, the dots will always be the same size regardless of the screen size, and you only need a single image for all devices.

.mobileTabsNav {
}
.mobileTabsNav .inner {
  min-height: 400px; 
  background: #00ff00 url(http://i.stack.imgur.com/M8WDz.png); 
  text-align: center;
  border-radius: 25px;
}

<div class="mobileTabsNav">
    <div class="inner">
        PLEASE SIGN IN
    </div>
</div>

As an aside, here is how the background might be cropped to get the tiling to look right: