Struggling with responsive Background-Image

Question

I have read so many posts about responsive CSS Background-Image's but I can't make mine work.

My site is http://www.conn3cted.uk.tn/intManagement.html and I'm trying to use the image as a 'banner' so can't have the height too large.

I seem to be able to fix the issue either on Desktop or Mobile, but they don't want to work together. I've used the suggested solutions (below) but I don't get the whole picture to scale up/down and it only shows part of it or a lot of white space. What am I doing wrong!?

.whatWeDo {
  padding-top: 100px;
  background-image: url("/images/intManagement/homePage/whatwedo.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 120px;
}

Answer 1

Try this css with replace your css:

This can also responsive only set top as per you needed:

.whatWeDo {
  background-image: url("/images/intManagement/homePage/whatwedo.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  float: left;
  height: 100%;
  padding-top: 100px;
  position: relative;
  top: 80px;
  width: 100%;
}

Answer 2

Try this css and use media queries to change your margin-top for mobile device:

.whatWeDo {
    background-image: url("/images/intManagement/homePage/whatwedo.jpg");
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 100vh;
    margin-top: 80px;
}

@media screen and (max-width: 878px) {
  .whatWeDo {
        margin-top: 170px;
    }
}