HTML hintergrund Bild nicht alle Seite

Ich versuche, um den hintergrund Bild, um die ganze html-Seite, aber ich bin scheitern jedes mal.Es ist nicht stretching.Hier ist meine css-und html-codes:

Css-code:

body {
    background-image:url(body_background.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width:1200px;
    margin:0 auto;
}

#main_container_div {
    padding: 0px;
    width: 1000px;
    margin-top: 30px;
    margin-left: 150px;
}

#div2 {
    float: left;
    width: 250px;
    height: 600px;
    margin-top: 0px;
    margin-right: 0px;
    background-repeat: no-repeat;
}
#div3 {
    position: relative;
    float: left;
    width: 750px;
    height: 500px;
    margin-top: 50px;
    overflow: hidden;
}

Html-body:

<body>    
    <div id="main_container_div">
        <div id="div3">
        </div>
        <div id="div2">
        </div>
    </div>
</body>

Können Sie versuchen, mit ein Bild mit 1366 x 768 Pixel Größe. Auch versuche ich diese auf 1366x768 Auflösung.Beachten Sie, dass das problem sichtbar ist, auf diese oder eine höhere Auflösung.Vielen Dank für jede Hilfe..

Wäre hilfreich, um zu sehen, dieser code funktioniert mit ein Bild in <jsfiddle.net>.
Sorry, ich weiß nicht, wie die Arbeit in jsfiddle mit einem lokalen png 🙁 Aber ich geben kann, ein link für das Bild i45.tinypic.com/w8npd3.png
Sie müssen nur fügen Sie den HTML-markup und den zugehörigen CSS-code, der von windows auf jsfiddle und link zu Ihrem hochgeladenen Bild. Es ist nicht schwer, probieren Sie es aus. Es wird Ihnen helfen, die Nutzung dieser Website und bekommen Sie Ihre Antworten schneller und besser.
Wie das ? jsfiddle.net/mhmtsdtkrt/3AwHa, Aber scheint alles ok, in jsfiddle Ergebnis-Fenster.Es zeigt nicht, was das problem ist.

InformationsquelleAutor Sedat KURT | 2013-02-05

css html

1

Versuchen background-size: cover in Ihrer css -
```
background-size:cover;
```
- Sorry, aber funktioniert nicht:(
- Dann ist dein png-Bild-Datei ein Leerzeichen versuchen, es zu korrigieren
InformationsquelleAutor Dineshkani

Verwenden Sie es nicht in den Körper. Versuchen Sie es auf das html-element wie folgt:

html
{
  background-image: url('your url');
  background-repeat: no-repeat;
  min-height:100%;
}

<html>
  <!--bg is applied here instead -->
  <body>
    ...
  </body>
</html>

InformationsquelleAutor Bahamut

0

Wenn Sie wollen auf display-hintergrund in voller Seite , die Sie benötigen, um den hintergrund wiederholen.
```
background-repeat: no-repeat;
```
Zu
```
background-repeat: repeat-x;
```
ODER
```
background-repeat: repeat-y;
```
- Ich glaube, er will das Bild zu skalieren des Viewports und will Sie nicht wiederholen-in keiner Weise.
- Ja @kleinfreund richtig ist.Ich will nicht, es zu wiederholen.Ich will, dass es zu skalieren auf ganze Seite
InformationsquelleAutor Devang Rathod

background: url(body_background.png) 100% 100% no-repeat;
background-size: cover;

Sorry funktioniert nicht:(

InformationsquelleAutor user2017037

background-size:cover;

funktioniert, aber es unterstützt nicht alle browser geben.
Hier der code, den ich in der Vergangenheit verwendet,

section#background { 
    background: url('../img/background/feature.jpg') no-repeat center center; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/background/feature.jpg',sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/background/feature.jpg',sizingMethod='scale')"; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    background-size: cover; }

und hier ist die jsfiddler link

http://jsfiddle.net/Raver0124/3AwHa/1/

InformationsquelleAutor Raver0124

0

dies funktioniert in der Regel für mich, wie ich in der Regel tun es in html statt body.
dies funktioniert, so nimmt es die ganze Seite in den web-browser.
ps. ich weiß, das ist alt, dachte, es würde helfen.
```
html { 
    background: url(images/bg.jpg or whatever link or img here) no-repeat center fixed; 
    background-size:cover;
}
```
InformationsquelleAutor Yami milas

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.