CODEWITHSUNDEEP
cssresponsive-designtwitter-bootstrap-3
bwitt
bwitt

Reputation: 25

Min-Height interfering with Responsive Image

I'm building a splash page based off a bootstrap template. My code functioned fine until I input it into my CMS, when the image would no longer display. My solution was to add a min-height to the site-wrapper (which contains the image in the css), which partially solved the problem, but created another. While I could see the image based on what value I assigned to the min-height, the image itself was no longer responsive. So, essentially, is there a responsive-friendly way to set the min-height so that the image will display responsively across all devices? Relevant code is below, thanks.

<style type="text/css">

.masthead-nav > li > a {
  color: white;
}
.masthead-nav > li > a:hover,
.masthead-nav > li > a:focus {
  border-bottom-color: white;
}


.site-wrapper {
  background-image: url("http://2.bp.blogspot.com/-vUwP1dwP3Pg/TaevaR3g37I/AAAAAAAAADw/v1oIwQjeMGc/s1600/ASUblack.jpg");
  background-size: cover;
  background-position: center;
  min-height: 930px;
}

@media (min-width: 992px) {
  .masthead, .mastfoot, .cover-container {
    width: 100%;
  }
}
</style>


<div class="site-wrapper">

  <div class="site-wrapper-inner">

    <div class="cover-container">

      <div class="masthead clearfix hidden-xs">
        <div class="inner">
          <h3 class="masthead-brand">Text</h3>
          <ul class="nav masthead-nav">
            <li><a href="#" target="_blank">X</a></li>
            <li><a href="#">Y</a></li>
            <li><a href="#">Z</a></li>
          </ul>
        </div>
      </div>

    </div>

  </div>

</div>

Upvotes: 1

Views: 804

Answers (1)

Devin
Devin

Reputation: 7720

Sure. Your problem is one many people has with Bootstrap: over-complicating things that are extremely simple and are already being taken care of by Bootstrap by default

Just keep your HTML markup AS IS and clean your CSS code of the unneeded stuff:

body {
    height:100vh;
    background: url("http://2.bp.blogspot.com/-vUwP1dwP3Pg/TaevaR3g37I/AAAAAAAAADw/v1oIwQjeMGc/s1600/ASUblack.jpg") no-repeat 50%;
    background-size: cover;
}
.masthead-nav > li > a {
    color: white;
}
.masthead-nav > li > a:hover, .masthead-nav > li > a:focus {
    border-bottom-color: white;
}

I don't know if you need those masthead-nav properties, so added them just in case, but you certainly don't need the other stuff you had. To shorten explanation: If you want a background for your body you add it in.... your body. Simple and easy, see Bootply

Upvotes: 1

Related Questions