Responsive Background-images

Question

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); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <section class="container img"> <h1 class="h1 a"><a name="Details">Details</a></h1> <div class="button"> <p>+</p> </div> <div class="cardContainer"> <div class="col-md-3 col-xs-12"> <img class="center-block"src="http://farm8.static.flickr.com/7411/8725728890_b056a881c5_m.jpg" alt="thirdimage"> <h2 class="Details">Details</h2> <p class="ptags">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.</p> </div> <div id=cardPrototype class="col-md-3 col-xs-12"> <img class="center-block"src="http://farm2.static.flickr.com/1577/26053634152_9a7d5b3580_m.jpg" alt="thirdimage"> <h2>Details</h2> <p class="ptags">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.</p> </div> <div class="col-md-3 col-xs-12"> <img class="center-block"src="http://farm8.static.flickr.com/7250/7445511584_9079770764_m.jpg" alt="thirdimage"> <h2>Details</h2> <p class="ptags">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.</p> </div> <div class="col-md-3 col-xs-12"> <img class="center-block"src="http://farm9.static.flickr.com/8540/8668499106_36a8b6cab8_m.jpg" alt="thirdimage"> <h2>Details</h2> <p class="ptags">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.</p> </div> </div> </section> 

Answer 1

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%; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <section class="container img"> <h1 class="h1 a"><a name="Details">Details</a></h1> <div class="button"> <p>+</p> </div> <div class="cardContainer"> <div class="col-md-3 col-xs-12"> <img class="center-block" src="http://placehold.it/220x150" alt="thirdimage"> <h2 class="Details">Details</h2> <p class="ptags">ad adaésdkf 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)</p> </div> <div id=cardPrototype class="col-md-3 col-xs-12"> <img class="center-block" src="http://placehold.it/240x150" alt="thirdimage"> <h2>Details</h2> <p class="ptags">ad adaésdkf 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)</p> </div> <div class="col-md-3 col-xs-12"> <img class="center-block" src="http://placehold.it/240x150" alt="thirdimage"> <h2>Details</h2> <p class="ptags">ad adaésdkf 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)</p> </div> <div class="col-md-3 col-xs-12"> <img class="center-block" src="http://placehold.it/240x150" alt="thirdimage"> <h2>Details</h2> <p class="ptags">ad adaésdkf 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)</p> </div> </div> </section> 

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

I modified snippet

Answer 2

我可以从你的问题中理解，希望这将解决你所遇到的问题

 background-repeat: no-repeat;