The Fund / Background is not accommodated as desired, generating white space

Navigation
-1

The following is a screenshot of my site:

As you can see, the image does not occupy the entire background and generates a blank space, because I added the property CSS3 : 

background-repeat: no-repeat;

I should add this property because when I adapted the page to mobile, I duplicated the background image and that is not the result I want.

The framework I'm working with is bootstrap version 3.3.7 .

This is the code CSS of the body: 

body {
    background-image: url("img/imgoriginales/seccionsementales.jpg");
    background-repeat: no-repeat;
               }

NEW EDITION OF THE QUESTION:

I add the code used based on a response from a user: 

    body {
        background-image: url("img/imgoriginales/seccionsementales.jpg") ;
        background-repeat: no-repeat;
        background-size: cover;   
}

It then generates another space below the web:

    
asked by simon 27.06.2017 в 19:55
source

4 answers

1

To scale the background image to cover everything, try: 

body{
   background-image: url("img/imgoriginales/seccionsementales.jpg");
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover !important; /* !important es opcional para forzarlo */
   background-repeat:no-repeat !important;
}

To scale the background image to fit inside the body, try: 

body{
   background-image: url("img/imgoriginales/seccionsementales.jpg");
   -webkit-background-size: contain;
   -moz-background-size: contain;
   -o-background-size: contain;
   background-size: contain !important;
   background-repeat:no-repeat !important;
}

Another option can be: 

body{
   background-image: url("img/imgoriginales/seccionsementales.jpg");
   -webkit-background-size: 100% 100%;
   -moz-background-size: 100% 100%;
   -o-background-size: 100% 100%;
   background-size: 100% 100% !important;
   background-repeat:no-repeat !important;
}

This way it does not repeat the background and covers the entire available space.

    
answered by 27.06.2017 / 20:16
source
1

In your css 

body {background: url(tuimagen.jpg) center center cover fixed no-repeat;}
    
answered by 27.06.2017 в 20:22
-1

Change the value of background-repeat .

Use round;

Asi: 

background-repeat: round;
    
answered by 27.06.2017 в 20:04
-1

Seeing my own code and the code of another user here are the two solutions:

of the user: 

 /* -webkit-background-size: 150% 200%;
   -moz-background-size: 150% 200%;
   -o-background-size: 150% 200%;
   background-size: 150% 200%;*/

Just modify the% of each property.

My solution that I found: 

   background-size:100% 100%;
    background-attachment:fixed;
    
answered by 27.06.2017 в 20:32
Project symfony on port 8000 works well on port 80 no (Sylius) Problem with PHP code