CODEWITHSUNDEEP
htmlcssbootstrap-4
Djalil lounis
Djalil lounis

Reputation: 121

Bootstrap container with background img issue

I have some simple HTML and CSS code where I want to have a div with class container and this div need to have a img as background. Inside that parent div I have a dive with class row and inside it I have 2 div classes :class="col-md-3" and col-md-9.

The problem is that now the child divs are not showing container div.

In other words I want my container div be the background and everything is displayed on top of it.

Any suggestions?

HTML:

<div class="container bckgroud">
  <div class="row">
    <div class="col-md-3">
      <h1>here is test for the me</h1>
    </div>
  <div class="col-md-9"></div>
  </div>
</div>

CSS:

body, html {
  background-color: #071a0f;
}

h1 {
  color: aqua;
}

.bckgroud {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
  background-image: url("../images/backg.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 66.64%; 
  /* (img-height / img-width * width) */
  /* (853 / 1280 * 100) */                
}

Actual result:

enter image description here

Upvotes: 0

Views: 226

Answers (3)

Ayyoub
Ayyoub

Reputation: 1375

body, html {
  color: white !important;
}
.bckgroud{
  background-image: url("https://i.sstatic.net/tAAGm.jpg");
  background-size: cover;
 }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bckgroud">
     <div class="row">
         <div  class="col-3">
             <h1>
                 here is test for the me
             </h1>
         </div>
         <div  class="col-9">
          Foo
         </div>
     </div>
</div>

Upvotes: 1

fencepencil
fencepencil

Reputation: 407

Something like this, perhaps:

body {
  background-color: #071a0f;  
}

h1 {
  color: aqua;
}

.bckgroud {
  height: 100vh;
  background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1)), url("https://i.sstatic.net/tAAGm.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

Upvotes: 1

Dennis
Dennis

Reputation: 1291

You mean something like this? Set your container height: 100vh; and delete the padding, it pushed the divs to the bottom

@charset "utf-8";
/* CSS Document */

 body,hmtl{

background-color: #071a0f;  
margin: 0;
}

h1{

color: aqua;
}


.bckgroud{

  width: 100%;
  height: 100vh;

  background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
  background-image: url("https://cdn.hasselblad.com/c81e7ee74fdc106a965f51b35c8dd87503a16f0e_tom-oldham-h6d-50c-sample1.jpg");
  background-size: contain;
  background-repeat: no-repeat;


}
<div class="container bckgroud">
   <div class="row">
       <div  class="col-md-3">
           <h1>
               here is test for the me
           </h1>
       </div>
       <div  class="col-md-9"></div>
   </div>
</div>

Upvotes: 1

Related Questions