CODEWITHSUNDEEP
css
terryeah
terryeah

Reputation: 593

CSS3 background image doesn't vertically stretch

I'm having a problem with vertically stretching the background image all the way down to the bottom. I'm aware that I can set height or min-height on the container class .view-index but don't want to set height property manually as I want the image to respond to the browser size when users resize the browser.

Whilst the background image stretches down the bottom, I don't want it to cover the second image, .view-extra img.

Example of what I would like to achieve: https://mdbootstrap.com/live/_MDB/index/docs/page-layouts/intro-transparent.html

Here is my JSFiddle (updated)

Upvotes: 0

Views: 1457

Answers (2)

Gerard
Gerard

Reputation: 15786

Setting the height to 100vh will give you what you need.

.view-index {
  background: url("http://i.imgur.com/f6f5Xq7.jpg") no-repeat center center;
  background-size: cover;
  display: -webkit-flex;
  display: flex;
  height: 100vh;
}

.view-text {
  color: white;
  margin: auto;
  text-align: center;
}
<div class="container">
  <div class="view-index">
    <div class="view-text">
      <h2>This Navbar isn't fixed</h2>
      <h5>When you scroll down it will disappear</h5>
      <br>
      <p>Full page intro with background image will be always regardless of device </p>
    </div>
  </div>
  <div class="view-extra">
    <img src="http://i.imgur.com/0NCooNY.jpg">
  </div>
</div>

Upvotes: 1

Mindless
Mindless

Reputation: 2357

Something like this?

.view-index {
    background: url("https://mdbootstrap.com/img/Photos/Others/img (42).jpg") no-repeat center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
}

.view-text {
	color: white;
	margin: auto;
	text-align: center;
}
<div class="view-index">
	<div class="view-text">
		<h2>This Navbar isn't fixed</h2>
		<h5>When you scroll down it will disappear</h5>
		<br>
		<p>Full page intro with background image will be always displayed in full screen mode, regardless of device </p>
	</div>
</div>

Upvotes: 1

Related Questions