Geek asks and answers

How to ensure uniform display of the background image inside the DIV

I have the following code on my ASP.net page (I would like it to be responsive):

<div class="mobileTabsNav">
    <div style="width: 100%; height: auto; min-height: 50px; max-height: 50px; background: #00ff00; background: url('/theImages/mobileMWBtn.png'); background-size: cover; text-align: center;">
        PLEASE SIGN IN
    </div>
</div>

CSS

.mobileTabsNav
{
    display: none;
    width: 100%;
    overflow: hidden;
}
@media (max-width: 715px)
{
    .mobileTabsNav
    {
        display: block;
    }
}

It seems that the bottom of the image is cropped:

enter image description here

When I change it to background-size: 100% 100%;, the image is stretched too much on a particular screen, as shown in the example shown here:

enter image description here

As you can see, the image is distorted.

In any case, so that the curve is the same at different levels of the screen, or do I need to add three separate images?

Image used in the script:

enter image description here

enter image description hereenter image description hereenter image description here

.mobileTabsNav
{
    width: 100%;
    overflow: hidden;
}
<div class="mobileTabsNav">
                        <div style="float: left; background: url('http://i.stack.imgur.com/NnCbY.png') no-repeat; min-height: 50px; min-width: 10px; max-width: 10px; background-size: contain;">

                        </div>
    <div style="background: url('http://i.stack.imgur.com/KbPm8.png')"></div>
                        <div style="float: right; background: url('http://i.stack.imgur.com/rll1d.png') no-repeat; min-height: 50px; min-width: 10px; max-width: 10px; background-size: contain;">

                        </div>
                    </div>
Run codeHide result
+1
source share
1 answer

, , (tileable), border-radius .

, .

.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>
Hide result

, , :

enter image description here

+3

More articles:


All Articles