Responsive Background-images

Responsive Background-images

I'm having problems with with my background-image. My background-image has the full width but it's not responsive. In my code I am using Bootstrap. I hope this isn't a problem.

The picture disappears with and without media query at 991 px. Also the only option to make the image full width is with the background-size cover.

When I use width 100% (which would make it responsive) doesn't really work. The image splits then. Same for max-width:100%. I have no idea why it's not working.

My code:

body, html {      padding:0px;      margin:0px;      font-family: 'TheSans Swisscom' !Important;  }        @media only screen and (min-width: 991px) {      .col-md-3{          width: calc(25% - 10px) !Important;          margin-right:5px;           margin-left:5px;          margin-top: 10px;          background-color: white;           position:relative !Important;           font-family: TheSans Swisscom;           display: block;          padding:0px !Important;      }  }        a:link {      color: black;  }            a:visited {      color: Black;  }            .a {      padding: 70px;      position: relative;      right: -5%;  }    a {      color: black !important;  }    .center-block {      width: 100%;  }    h2 {      font-size:30px;      margin: 0 0 auto;      width: 9em;      text-align: center;  }    .ptags {      line-height: 1.2;      padding: 5px;  }    .button {         margin-right: 10px;      height: 45px;      width: 45px;      background-color: black;      font-size: 60px;      color: white;      text-align: center;      line-height: 45px;      bottom: 10px;      cursor: pointer;      z-index: 1;      font-family: TheSansSwisscom;       position: relative;      right: -98%;      top: -308px;  }    .ktm {      text-align: center;  }    .h1{      font-size: 36px;      text-align: center;  }    h2 {      font-size:30px;      margin: 0 0 auto;      width: 9em;      text-align: center;  }    .img-center{      display: block;      margin:0 auto;  }    a:link {      color: black;  }    .row{      display:block;  }    @media only screen and (min-width: 991px){      .img {          background-image: url('https://pbs.twimg.com/profile_images/3396462371/53b106cad4de869739517b1ff5d75429.jpeg');          background-size: cover;          background-repeat: no-repeat;      }  }    .container{      width: 100% !important;      padding: 100px;  }    .cardContainer {      width: 1200px;      position: relative;      margin-left: calc( 50% - 600px);  }

        
             
Details
          
              
+
          
          
              
                                    
Details
                  
Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.
              
              
                                    
Details
                  
Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.
              
              
                                    
Details
                  
Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.
              
              
                                    
Details
                  
Bacon ipsum dolor amet capicola bacon tenderloin, venison landjaeger porchetta ham prosciutto frankfurter. Turkey ball tip jowl t-bone pastrami boudin salami, doner fatback cupim swine chicken cow biltong hamburger. Ham kevin hamburger meatloaf turducken shankle rump. Shankle andouille venison, kielbasa pork belly jerky biltong ham hock.
             
         
      

Answer by Abdi Hamid for Responsive Background-images

you can make your background image by making the responsive the tag that contain the image

.img {    display: block;    width: 100% \9;    height: auto;    width: 100%;  }

Answer by LeonardoMoreira for Responsive Background-images

Have you checked for other rules that might be overriding yours?

If you are loading more CSS after this code of yours, open the console and check if there's a rule that would set background to none or color.

Answer by ZombieChowder for Responsive Background-images

I think if you add the tag img-responsive to your background image that it should work properly. Check out this fiddle, I've just added the class img-responsive to your background image and added an ID tag:

Fiddle with possible solution

Answer by Raimonds for Responsive Background-images

I am not sure if this is what you want but have a look.

.img {    background-image: url('https://pbs.twimg.com/profile_images/3396462371/53b106cad4de869739517b1ff5d75429.jpeg');    background-repeat: no-repeat;    background-size: cover;  }    .center-block{    width:100%;  }

  
    
Details
    
      
+
    
      
      
                
Details
        
ad adasdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)
      
      
                
Details
        
ad adasdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)
      
      
                
Details
        
ad adasdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)
      
      
                
Details
        
ad adasdkf awpjd aiwj dwp diw aapdfjap wkd wo dakow dmaow d aodw dja wo lda ow dakldow daowdkwo dkaqodejqd dkaadfa ddfjkladfhi diwj diwdja idjdjwi adijq asdfiw djkafhi alkfwiwj diwdja idjaidfl qod qd adsfadsf (unknown language)
      
    
  

But probably you want to use background-size: cover; with background-repeat: no-repeat; this would make it absolutely responsive

I modified snippet

Answer by Chopper for Responsive Background-images

As much as I could understand from your question, hopefully this will solve the issue you are having

 background-repeat: no-repeat;   

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72