I am facing a minor issue while attempting to create a responsive div with an image background.
- The div does not match the size of the image: 540px-290px
- When I resize the browser, the two divs do not resize together.
In each div, there is a background image and I want them to be responsive. However, both divs do not cover the full size as I am using percentages for responsiveness. If I switch to pixels, it will lose its responsiveness.
This is how my div should look like: https://i.sstatic.net/XfzZD.jpg
I am utilizing the Bootstrap framework.
HTML
<div class="row index-banner">
<div class="col-xs-6">
<div class="latest-mobile">
<h1> releases?</h1>
<p>We got you </p>
<p>Find out more ></p>
</div>
</div>
<div class="col-xs-6">
<div class="sponge-bob">
<h1>We have just ....</h1>
<p>Let your kids enjoy .</p>
<p>Find out more ></p>
</div>
</div>
</div>CSS
html,
body {
width: 100%;
height: 100%;
}
.col-xs-6 .sponge-bob {
background: url(../../public/images/content/sponge-bob.jpg) no-repeat;
margin-left: 5%;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
display: table;
position: relative;
}
.col-xs-6 .latest-mobile {
background: url(../../public/images/content/latest-mobile.jpg) no-repeat center center scroll;
margin-left: 7%;
width: 100%;
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
display: table;
position: relative;
}