responsive div banner with content inside

Question

RESPONSIVE DIV CONTAINING IMAGE AND CONTENT

I am trying to have a div that contains a background image which has content (writing) on it as shown in the picture. The div needs to be responsive, and the image has to remain 100% and reach but not exceed the frame of the screen no matter what size the screen is.

The problem is that when I zoom out, by pressing ctrl and scroll down on the mouse, the image loses alot of it's height rather than stay the same height. How do i make it not lose its height when zooming in and out.

I've tried everything and this is the best I've got

enter code here


       <div id="container">
            <div class="content-inner">
                <h1>HELLO!!</h1>
                <hr>
                <p>I HAVE A QUESTION AND WAS WONERING IF YOU CAN HELP?</p>

            </div>
        </div>



<style>
html, body{
margin:0;
}
#container {
    position:relative;
    border:1px solid red;
    position: relative;
    width: 100%;
    min-height: auto;
    text-align: center;
    color: #fff;

    background: radial-gradient(circle, rgba(17, 5, 19, 0.94), rgba(20, 7, 35, 0.78), rgb(0, 0, 0)), url(backgrounddark.png) no-repeat;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
            }

#container .content-inner {
    position: relative;
    width: 50%;
    padding: 100px 15px;
    text-align: center;
    margin:auto;
                        }

#container .content-inner .content-inner h1 {
    margin-top: 0;
    margin-bottom: 0;
    text-transform: uppercase;
    font-weight: 700;
}

#container .content-inner .content-inner hr {
    margin: 30px auto;
}

#container .content-inner .content-inner p {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,.7);
}


</style>

Thanks

Do you also want the image to be 100% of the window height? – RPL Feb 05 '16 at 02:04 — RPL, Feb 05 '16 at 02:04

score 1 · Accepted Answer · edited May 23 '17 at 12:07

In your code you have not set the height for the container, and the min-height is set to auto, which means it is going to scale to the size of the content that is contained in the div. The background image is NOT considered content.

When you zoom out, you are making the font size and padding smaller compared to the screen size, which is making the div smaller (contents get smaller, div height gets smaller).

If you wish to be able to zoom out without the image getting smaller (even though the text does) I would suggest setting the height of the div. You can set it to a percentage of the viewport height using the vh units (see here for browser support, it's pretty good but I don't know your scenario: http://caniuse.com/#feat=viewport-units). Or you can set all the elements above #container to have a height or min-height of 100%, which will allow you to use a percentage for the value of height / min-height of #container.

Note that your text will NOT be vertically centered automatically if you use a dynamic height, additional CSS will be required (see this Vertically align text in a div).

Haha! good explanation man. It makes perfect sense now. I've applied a height like you suggested and it works fine XD. Thanks! — Jakie, Feb 05 '16 at 10:23

responsive div banner with content inside

1 Answers1