wake-up-neo.net

Twitter Bootstrap Responsive Background-Image in Div

Wie kann ich #bg image wäre es also ansprechend, veränderbar und proportional in allen Browsern?

HTML:

 <div class="container">
       <div class="row">
          <div class="col-md-2"></div>

            <div class="col-md-8 col-sm-6 col-xs-12 well" id="bg">

               </div>

            <div class="col-md-2"></div>
       </div>
  </div>

cSS:

@import url('bootstrap.min.css');

body{
    background: url('../img/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin-top: 12%;    
}

#bg{
    background:url('../img/con_bg4.png') no-repeat center center;
    height: 500px;
}
htmlcsscss3twitter-bootstraptwitter-bootstrap-3
59
vkatsitadze

Ich habe eine Lösung gefunden.

background-size:100% auto;
79
vkatsitadze

Sie könnten auch versuchen:

background-size: cover;

Es gibt einige gute Artikel über die Verwendung dieser CSS3-Eigenschaft: P Vollständiges Hintergrundbild mit CSS-Tricks und CSS-Hintergrundgröße mit David Walsh .

BITTE BEACHTEN SIE - Dies funktioniert nicht mit IE8-. Es wird jedoch auf den meisten Versionen von Chrome, Firefox und Safari funktionieren.

24
doodelicious

Versuchen Sie dies (auf eine Klasse anwenden, in der sich Ihr Bild befindet (nicht img selbst), z.

.myimage {
  background: transparent url("yourimage.png") no-repeat top center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: 100%;
  height: 500px;
}
7
Jowita Emberton

Ich denke, das sollte auch funktionieren:

background-size: contain;

Es gibt an, dass die Größe des Bilds so geändert werden soll, dass es in das Element passt, ohne dass das Seitenverhältnis verloren geht.

6
KevinAdu

Ich hatte das ähnliche Problem und löste es mit:

background:url(images/banner1.png) no-repeat center top scroll;
background-size: 100% auto;
padding-bottom: 50%;

... hier musste ich das padding: 50% hinzufügen, da es sonst bei mir nicht funktionierte. Ich konnte die Höhe des Containers gemäß dem Größenverhältnis meines Bannerbilds einstellen. und es ist auch in meinem Fall ansprechbar.

6
Mashhood

Das sollte funktionieren

background: url("youimage.png") no-repeat center center fixed;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
 background-size: 100% auto;
1
Jay

Die Art und Weise, dies zu tun, ist, in Ihrem Fall die Hintergrundgröße zu verwenden:

background-size: 50% 50%;

oder

Sie können auch die Breite und Höhe der Elemente in Prozent festlegen

1
Hive7

Verwenden Sie nicht fest:

.myimage {
   background:url(admin-user-bg.png) no-repeat top center;
   background: transparent url("yourimage.png") no-repeat top center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: 100%;
   height: 500px;
}
1
RayKech

Mby bootstrap img-responsive Klasse suchst du.

1
Dzintars