1

I'd like to use an image as a background for my header. Here's what it looks like now:

A rectangular photo with a curved bottom edge and a red curved line just below it.

Now here's my mobile version: A taller rectangular photo with a straight bottom edge. There is white space between the photo and the curved red line.

As you can see, there's a blank space that I don't want here. I've tried using vh/vw, setting the body height at 100%, but it doesn't work.

.home .part1-img-container {
  min-height: 650px;
  background-color: grey;
  background: url(assets/img/brooklyn.jpg) no-repeat center center scroll;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  /*padding-top: 70px;*/
  border-bottom-left-radius: 50% 10%;
  border-bottom-right-radius: 50% 10%;
  margin-bottom: 10px;
  background-position-y: -187px;
}
<div class="part1 col-md-12 col-lg-12 p-0">
  <div class="part1-img-container">

  </div>
</div>
BSMP
  • 4,596
  • 8
  • 33
  • 44
Mael Landrin
  • 103
  • 3
  • 12
  • 1
    have you tried to do this without setting a `min-height` – Toxide82 Nov 08 '18 at 13:13
  • The problem is clearly the min-height, I was added an answer but I misunderstood the question, so @Toxide82 seems to be right. – Marcos Pérez Gude Nov 08 '18 at 13:15
  • Still doesn't work :/ I think the min-height sets the minimum height for the div, not for the background-image unfortunately – Mael Landrin Nov 08 '18 at 13:16
  • I don't have a media query on that, I think I found a fix by manually setting the width and height of the background image, I'll update my original post ! – Mael Landrin Nov 08 '18 at 13:30
  • Why are you using: background-position-y: -187px; ? – AKNair Nov 08 '18 at 13:30
  • With the actual picture I'm using ( just can't show it ), the interesting part of the image is hidden by the navbar – Mael Landrin Nov 08 '18 at 13:32
  • 1
    I have made a fiddle out of the code you have presented. Without background-position-y: -187px; it is working fine in mobile and desktop both. http://jsfiddle.net/51f7w6q0/13/ – AKNair Nov 08 '18 at 13:33

0 Answers0