Background image

If you want the background-image to be responsive you should use padding

.bg-registro {
        background-image: url("https://www.w3schools.com/css/paris.jpg");
        padding:20% 0;
        background-repeat: repeat-y;
        /* background-size: cover;  */
        position: relative;
    }

I have not finished understanding your question, that is, I see that you removed background-size: cover and without this, because this will never happen that you say:

  

I need you to fill the entire section bg-registro

.bg-registro {
        background-image: url("https://www.w3schools.com/css/paris.jpg");
        min-height: 100vh;
        background-size: cover;
        position: relative;
        width: 100%;
    }

<section class="bg-registro">
        <div class="col-sm-offset-1 col-md-offset-1 col-lg-offset-1 col-xs-12 col-sm-10 col-md-10 col-lg-10 registrat">
            <section>
                <form action='' method="POST">
                    <div class="farciment-formulari">
                      (....Contiene un formulario....)
                    </div>
                </form>
           </section>
       </div>
    </section>

Now you also say:

  

(..) the image does not repeat or adapt ...

Precisely if you remove the background-size: cover; and add background-repeat: it will be repeated, no problem. Now if you want it to be repeated, but having specific measurements, without deforming you can try: Background-size: 300px auto; :

.bg-registro {
        background-image: url("https://www.w3schools.com/css/paris.jpg");
        min-height: 100vh;
        background-size: 200px auto;
        background-repeat: repeat;
        position: relative;
        width: 100%;
    }

<section class="bg-registro">
        <div class="col-sm-offset-1 col-md-offset-1 col-lg-offset-1 col-xs-12 col-sm-10 col-md-10 col-lg-10 registrat">
            <section>
                <form action='' method="POST">
                    <div class="farciment-formulari">
                      (....Contiene un formulario....)
                    </div>
                </form>
           </section>
       </div>
    </section>

A third option is to use for example the measures: vmin , vmax , vh , or vw . For example, if you want to always, regardless of occupying 100% of the height of the device that you do not care if it repeats to the sides, you can use Background-size: auto 100vh; background-repeat: auto; , if you want to always occupy 100% of the width of the device, without import if the container covers all the width or not: background-size: 100vw auto; , if you want to keep the same size ratio in any device regardless of the size of this uses the other two measures: vmin or vmax ;

If you do not want to do anything about this, I recommend you attach an image of what you want to achieve or try to explain yourself better, because initially, you want an entire element to be taken care of, but also be repeated, it is a contradiction.

The detail is that you do not give specific measures to .bg-registro . If it is understood that you want it to occupy 100% stop (although as you set it is not going to give you the result you expect), but what? mmm, I do not know, it could be from another previous element or from the window or the body, etc. You do not specify Nor are you giving it a width ... and you have disabled background-size: cover; , enough to not work for you.

Well, since you are not giving width and height measurements to the container that has the image as a background, this element will only cover the same space occupied by the inherent elements (such as the form), and since the form does not have any defined measures, simply everything is reduced to the space that is occupying the text (...contiene un formulario...) .

So, for whatever the case and / or measures, the ideal is to use background-size: cover; and specify the width and height you want to cover in particular (for 100% of high use "viewport height", that is, height: 100vh; ), so the image will be adjusted to 100% of the width or height according to the dimensions of the window or device being readjusted, with the longest side of the container always remaining 100%, the other side will be exceeded, with the hidden surplus (this will ensure that the background image always remains in the entire area of the container). It should not be adjusted to 100% of width and height (with respect to the measurements of the image) at the same time, because if the device does not have the same proportion as the image, it will be deformed, leaving it with a "squashed" effect or " elongated "that looks very, very bad and little (or nothing) professional.

NOTE: Keep in mind that if the height or width ratio of the container, window or device is very large (for example 1000px wide by 400px high, or 500px wide by 1200px high) and your image is 1200px wide by 800px high (to mention an example), it will never be possible to appreciate the complete image or exactly in its proportion.

Also consider that if you have a background image in the entire window, your form should have a white background, so that the texts are clear and legible, all this for use and functionality (ie for a good UI / UX ), since the design must be thinking about the user, and he will thank you. So never put regular text blocks on background images.

body {
  margin: 0;
  padding: 0;
}

.bg-registro {
  background-image: url("https://www.w3schools.com/css/paris.jpg");
  height: 100vh;
  width: 100%;
  background-size: cover;
  display: block;
}
.farciment-formulari {
  width: 80%;
  margin: 50px 10%;
  height: 100px;
  display: inline-block;
  background-color: #fff;
  border-radius: 3px;
  padding: 15px; 
  box-sizing: border-box; 
}

<section class="bg-registro">

        <div class="col-sm-offset-1 col-md-offset-1 col-lg-offset-1 col-xs-12 col-sm-10 col-md-10 col-lg-10 registrat">
        
            <section>
            
                <form action='' method="POST">
                
                    <div class="farciment-formulari">
                    
                      (....Contiene un formulario....)
                      
                    </div>
                    
                </form>
                
           </section>
           
       </div>
       
</section>

I hope it serves you. Greetings.

Previously, you have to understand that if you do not specify a width to the "box" of the content, said background image will only occupy the content that gives it, so to speak, the text in this case.

First you should create the form, to define the height and width of the center. And then look for the width and height of the bottom container.

Try the following: (and add the form):

.bg-registro {
        background-image: url("https://www.w3schools.com/css/paris.jpg");
        background-repeat: no-repeat;
        background-position:100%;
        height:100vh;
        width:100%;
        background-size: cover;
    }
.farciment-formulari {
        background:rgba(250,250,250,.5);
        padding:1em;
    }

<!DOCTYPE html>
<html>

<head>
<!-- agregue los .css de bootstrap para trabajar mejor aquí -->
  <meta charset="utf-8">
  <link rel="stylesheet1" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.csss">
</head>

<body>
    <section class="bg-registro">
        <div class="col-sm-offset-1 col-md-offset-1 col-lg-offset-1 col-xs-12 col-sm-10 col-md-10 col-lg-10 registrat">
            <section>
                <form action='' method="POST">
                    <div class="farciment-formulari col-md-8">
                      (....Contiene un formulario....)
                    </div>
                </form>
           </section>
       </div>
    </section>
   </body>
   </html>