1

I have a bootstrap Masthead img thats great when its full size , but as I shrink the page the entire ~25% of the top and bottom get cut off. Of all the things on the page I want this to just scale correctly. I tried width:100% but that don't work

 padding-top: 10rem;
   padding-bottom: calc(10rem - 56px);
   background-image: url("../img/Am/20180904_094438cropped.jpg");
   background-position: center center;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

Thanks

mike628
  • 45,873
  • 18
  • 40
  • 57
  • maybe this helps- https://stackoverflow.com/questions/45355016/bootstrap-page-header-background-image –  Sep 11 '18 at 19:33
  • Also check this: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit. Probably `scale-down` will help. –  Sep 11 '18 at 19:42

1 Answers1

0

You could try putting your code into a container div. It may look something along the lines of:

.container {
padding-top: 10 rem;
padding-bottom: calc(10rem - 56px);
background-image: url("../img/AM/20180904_094438cropped.jpg");
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100%;
width: 100%;
}

Additionally, I found this reference for you: similar topic on stack overflow

I think it may help. Your code looks just about the same, however the width 100%, is a bit different! Check it out.

acaldwell
  • 11
  • 5