Creating a Responsive Div with Image and Content https://i.sstatic.net/vN3Ni.png
I want to design a div that contains a background image with text on it, just like the example shown. The main requirement is for this div to be responsive, so the image stays at 100% width within the screen frame no matter the screen size.
The issue I'm facing is that when zooming in or out (using ctrl + scroll), the image tends to lose its height instead of maintaining the same height. How can I prevent this loss of height when zooming?
I have tried various solutions but haven't found one that works perfectly. Here's what I have so far:
enter code here
<div id="container">
<div class="content-inner">
<h1>HELLO!!</h1>
<hr>
<p>I HAVE A QUESTION AND WAS WONDERING 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>
Thank you