Menu icon Foundation
responsive background-image in row odd on small screen

Building a simple website, where the main image is loaded into the background of a div.class("row"). Looks okay, all be it a little smaller than I expected. Anyway, looks ok, until I squeeze the browser, at which point the content of the div goes all strange, and the image zooms in. Which is kind of the size I was expecting when on a wider screen. But you do not see all the image. Tried it on my iPad mini too, same issue. Here is the code:

<div class="row" style="background: url('../aw-img/bigImage.png') no-repeat center; background-size: cover;">
    <div class="large-12 columns">
        <div class="row">
            <div class="large-4 columns">
                <div style="margin-left: 5%; margin-top: 425px;">
                    <button class="button" onclick="registerButton()">Register</button> <button class="button" onclick="loginButton()">Login</button>
                    </div>
            </div>
            <div class="large-8 columns">
                <div class="frontResultBox"></div>
            </div>

        </div>
    </div>
</div>
            

         

I have tried a number of ideas from looking on here, and stackExchange, but no joy.

Can someone please help me with this, as I'm going crazy trying to figure it out. Honestly thought it would be easy :(

Thanks in advance.

cssimagebackgroundhtml

Building a simple website, where the main image is loaded into the background of a div.class("row"). Looks okay, all be it a little smaller than I expected. Anyway, looks ok, until I squeeze the browser, at which point the content of the div goes all strange, and the image zooms in. Which is kind of the size I was expecting when on a wider screen. But you do not see all the image. Tried it on my iPad mini too, same issue. Here is the code:

<div class="row" style="background: url('../aw-img/bigImage.png') no-repeat center; background-size: cover;">
    <div class="large-12 columns">
        <div class="row">
            <div class="large-4 columns">
                <div style="margin-left: 5%; margin-top: 425px;">
                    <button class="button" onclick="registerButton()">Register</button> <button class="button" onclick="loginButton()">Login</button>
                    </div>
            </div>
            <div class="large-8 columns">
                <div class="frontResultBox"></div>
            </div>

        </div>
    </div>
</div>
            

         

I have tried a number of ideas from looking on here, and stackExchange, but no joy.

Can someone please help me with this, as I'm going crazy trying to figure it out. Honestly thought it would be easy :(

Thanks in advance.

Rafi Benkual almost 5 years ago

Here is your code http://codepen.io/rafibomb/pen/myxBMO

I added a web image so we can see what's happening.

Images are set to fit the container 100% width, This behavior is normal in responsive design. You can choose other background sizes but essentially on a small screen the image will either shrink, or overflow as it does in your example.

If you want the height to stay the same, you're best off loading another portrait image for small screens.

Andrew Walker almost 5 years ago

I have looked at this and changed the image to the one I a, using. It works as it should on codepen. But on the site it does not and rather than shrinking it jumps and zooms in making the content jump into different positions :(

I cannot make the site public yet to show anyone, but any ideas what to look for ?

Andrew Walker almost 5 years ago

This is what is causing it. If I add this, this is when the image behaves as described above?

.frontResultBox {
     background-color: #008CBA;
     opacity: 0.7;
     margin-top: 10px;
     margin-right: 10px;
     float: right;
     width: 250px;
     min-height: 250px;
     border: #007ba4 thick solid;
 }