1

I have used a bootstrap 4 template then edited it to fit my design. It is almost completely fully responsive except for one aspect. I have a background image as a main header image. It is responsive except when on mobile. I was wondering how I can make it fill the mobil screen while also shrinking to show the image.

header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 56px);
  background-image: url(../img/fg-heads-nologo.png);
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover
}

header.masthead hr {
  margin-top: 30px;
  margin-bottom: 30px
}

header.masthead h1 {
  font-size: 2rem
}

header.masthead p {
  font-weight: 300
}

@media (min-width:768px) {
  header.masthead p {
    font-size: 1.15rem;
  }
}

@media (min-width:992px) {
  header.masthead {
    height: 100vh;
    min-height: 650px;
    padding-top: 0;
    padding-bottom: 0
  }
  header.masthead h1 {
    font-size: 3rem
  }
}

@media (min-width:1200px) {
  header.masthead h1 {
    font-size: 4rem
  }
}
<header class="masthead parallax smooth-scroll text-center text-white d-flex col-xs-4">
  <div class="container my-auto">
    <a href="#about"><span></span></a>
  </div>
</header>

Thanks!

Obsidian Age
  • 41,205
  • 10
  • 48
  • 71
laura
  • 35
  • 1
  • 5

2 Answers2

1

Use below properties in your CSS

background-size:contain;
background-position:center;
Ambuj Khanna
  • 1,131
  • 3
  • 12
  • 32
0

Try this->

#image {
    float:left;
    width:100%;
    height:400px;
    background: url('https://salemnet.vo.llnwd.net/media/cms/CW/faith/36525-Jesus-Jesussitting-painting-thinkstock.1200w.tn.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
<div id="image"></div>
Korah Babu Varghese
  • 47
  • 7