Responsive background on div using bootstrap part 1




The subject of having a responsive background fill the entire size of a div is something which i have seen many suggestions , using background-size: cover on a div and let it spread across the screen, but what about using columns of content in side that div and how will the height of div with the background spread to fill that height?  you would go a long the following:

1- create a div and add the follwojng style

<div style="background: url('https://images.pexels.com/photos/87646/horsehead-nebula-dark-nebula-constellation-orion-87646.jpeg') no-repeat; background-color: rgba(0, 0, 0, 0); position:relative; overflow:hidden; background-size:cover;">

2- depending on the height you would like to have for your background div you must set the image size to the height you would like such as 365px , this will will auto size to match at content within it as well so even if the intial size is 365 it will expand

so following my code above you may wonder there is nothing special, will for the secret sauce here
what you should do next:

3- place an img tag and have it's visibility to hidden this will take on the height of image but it will also expand to fill any content as well you must be aware on content height in addition to image height so if we have an image with height 265 then add a height on the img tag 132 in order to have 265 even with this set it will expand to accommodate any extra height, try out

below is the complete bootstrap code nothing special besides the img tag, bootstrap columns are already positioned relative

<div class="container-fluid" style="overflow:hidden; padding-left:0px; padding-right:0px;" id="x">

<div class="col-md-12" style="padding-left:0px; padding-right:0px; overflow:hidden;">

<div style="background: url('bg.jpg') no-repeat; background-color: rgba(0, 0, 0, 0); position:relative; overflow:hidden; background-size:cover; object-fit: cover;">

<div class="clearfix" style="height:40px;"></div>

<div class="col-md-6" style="color:#fff; text-align:center;">
<h1>
test
<p style="font-size:16px;">the image so that it scales nicely to the parent element</p>
<p style="font-size:16px;">the image so that it scales nicely to the parent element</p>
<p style="font-size:16px;">the image so that it scales nicely to the parent element</p>
<p style="font-size:16px;">the image so that it scales nicely to the parent element</p>
</h1>
</div>

<div class="col-md-6" style="color:#fff; text-align:center;">
<h1>
test
<p style="font-size:16px;">the image so that it scales nicely to the parent element</p>
<p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>    <p style="font-size:16px;">the image so that it scales nicely to the parent element</p>
</h1>

</div>

<img style="visibility: hidden;" src="bg.jpg" alt="" />

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

Comments