Making background image not-resizable

Question

I'm using Boostrap and I've set a background image to an empty div using the following markup and CSS:

<section id="process">
  <div class="container"> <img src="img/production.png" id="processicon" class="center-block"> </div>
  <!--end container-->
  <div id="processbg"></div>
  <div class="container">
    <h2 class="text-center">materials and construction</h2>
    <p class="text-center">The carbon neutral and responsibly sourced bamboo contributes to over 70% of the skis construction. The combined strength to weight ratio and consistency enables us to simplify and take a streamline approach to the skis construction.</p>
    <p class="text-center">The search for the highest quality materials from around the globe has always been an essential role since day one.</p>
  </div>
  <!--end container--> 
  <img src="img/bigski.jpg" class="center-block bigski">
  <div class="container text-center">
    <h2 class="text-center more"><a href="#">read more</a></h2>
  </div>
  <!--end container--> 
</section>
<!--end process-->

And:

#processbg {
    background: url(../img/process.jpg) no-repeat center 110% fixed;
    height: 602px;
    background-size: 100%;
}

Everything looks good on desktops and tablets, but when viewed on mobile, the image gets really small and leaves big gaps around it. This makes sense, because the height of the empty div is always 602 px and the photo scales down when the viewport gets smaller. Is there a way to make the image non-responsive or is there some other solution to this?

Here's a link to the actual web page as well: http://skiest.ragne.me/. You can click the PROCESS link in the navigation and it takes you to the mentioned photo.

Thank you for your help.

Answer 1

I think you are looking for background-size: cover; which will:

Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area

source w3schools.com

Change your CSS to the following and see if that works for you.

#processbg {
    background: url(../img/process.jpg) no-repeat center 110% fixed;
    height: 602px;
    background-size: cover;
}

Alternatively you could just remove the background-size declaration and see if that gives you the desired result. The default is auto which should leave the image at its normal size.