Vollbild-Hintergrundbild

<style type="text/css">
html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
</style>

Ein Hinweis zur "background-size: cover" -Lösung, Sie müssen sie nach der "background" -Definition setzen, sonst funktioniert es nicht, zum Beispiel funktioniert das nicht:

html, body {
    height: 100%;
    background-size: cover;
    background:url("http://i.imgur.com/aZO5Kolb.jpg") no-repeat center center fixed;
}

http://jsfiddle.net/8XUjP/58/

Ich hatte das gleiche Problem mit meiner Pre-Launch-Site EnGrip . Ich bin mit dieser Ausgabe live gegangen. Aber nach ein paar Versuchen hat das endlich für mich funktioniert:

background-size: cover;
background-repeat: no-repeat;
position: fixed;
background-attachment: scroll;
background-position: 50% 50%;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
z-index: 0;

reine CSS-Lösung. Ich habe hier keine JS/JQuery-Korrektur. Auch bin ich neu in dieser UI-Entwicklung. Ich dachte nur, ich würde eine funktionierende Lösung teilen, seit ich diesen Thread gestern gelesen habe.

Ich persönlich empfehle nicht, Stil auf HTML-Tags anzuwenden, es könnte After Effects irgendwo später in der Entwicklung haben. 

daher empfehle ich persönlich, die Eigenschaft background-image auf den body-Tag anzuwenden.

body{
    width:100%;
    height: 100%;
    background-image: url("./images/bg.jpg");
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Dieser einfache Trick löste mein Problem. Dies funktioniert für die meisten größeren/kleineren Bildschirme. 

es gibt so viele Möglichkeiten, dies zu tun, ich fand es mit minimalen After Effects einfacher

für das Hintergrundbild im Vollbildmodus

set css height (höhe: 100 vh)

beispiel:

.main-header {
    background-image: url(../img/bb-background2.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height:100vh;  /* responsive height */
}

Rücken strecken

Schauen Sie sich dieses Einzeiler-Plugin an , das ein Hintergrundbild ansprechend skaliert.

Alles was Sie tun müssen, ist:

1. Fügen Sie die Bibliothek hinzu:

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>

2. Rufen Sie die Methode auf:

$.backstretch("http://dl.dropbox.com/u/515046/www/garfield-interior.jpg");

Ich benutzte es für eine einfache "im Aufbau befindliche" Website, die ich hatte, und es funktionierte perfekt.

Versuche dies:

<img src="images/background.jpg" 

style="width:100%;height:100%;position:absolute;top:0;left:0;z-index:-5000;">

http://thewebthought.blogspot.com/2010/10/css-making-background-image-fit-any.html

Einfaches Vollbild und zentriertes Bild https://jsfiddle.net/maestro888/3a9Lrmho

jQuery(function($) {
    function resizeImage() {
        $('.img-fullscreen').each(function () {
            var $imgWrp = $(this);

            $('img', this).each(function () {
                var imgW = $(this)[0].width,
                    imgH = $(this)[0].height;

                $(this).removeClass();

                $imgWrp.css({
                    width: $(window).width(),
                    height: $(window).height()
                });

                imgW / imgH < $(window).width() / $(window).height() ?
                    $(this).addClass('full-width') : $(this).addClass('full-height');
            });
        });
    }

    window.onload = function () {
        resizeImage();
    };

    window.onresize = function () {
        setTimeout(resizeImage, 300);
    };
 
    resizeImage();
});

/*
 * Hide scrollbars
 */

#wrapper {
    overflow: hidden;
}

/*
 * Basic styles
 */

.img-fullscreen {
    position: relative;
    overflow: hidden;
}

.img-fullscreen img {
    vertical-align: middle;
    position: absolute;
    display: table;
    margin: auto;
    height: auto;
    width: auto;
    bottom: -100%;
    right: -100%;
    left: -100%;
    top: -100%;
}

.img-fullscreen .full-width {
    width: 100%;
}

.img-fullscreen .full-height {
    height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="wrapper">
    <div class="img-fullscreen">
        <img src="https://static.pexels.com/photos/33688/delicate-Arch-night-stars-landscape.jpg" alt=""/>
    </div>
</div>

For the full-screen responsive background image cover

<div class="full-screen">

</div>

CSS

.full-screen{
    background-image: url("img_girl.jpg");
    height: 100%; 
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Ich würde sagen, in Ihrer Layoutdatei geben Sie ein 

<div id="background"></div>

und dann in deiner css 

#background {
 position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  background: image-url('background.png') no-repeat;
  background-size: cover;
}

Stellen Sie sicher, dass das Hintergrundbild in Ihrer App/Assets/Images enthalten ist und ändern Sie auch das Hintergrundbild 

background: image-url('background.png') no-repeat;

'background.png' zum eigenen Hintergrundbild.

Sie können auch einen Vollbild-Bannerbereich ohne Verwendung von JavaScript erstellen, reinen, auf CSS basierenden, responsiven Vollbild-Bannerbereich, mit der Höhe: 100vh; in banner main div, hier haben wir ein lebendes Beispiel dafür

#bannersection {
    position: relative;
    display: table;
    width: 100%;
    background: rgba(99,214,250,1);
    height: 100vh;
}

https://www.htmllion.com/fullscreen-header-banner-section.html

Verwenden Sie diesen Code unten: 

.classname{
    background-image: url(images/paper.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

Hoffe, es funktioniert. Vielen Dank

Ich habe diese Javascript-Funktion ausgeführt: Sie fixiert Ihr Hintergrundbild in der Basis mit der größten Größe (Breite od height) auf Ihre Bildschirmgröße, ohne das Bildseitenverhältnis zu ändern.

<script language="Javascript">

function FixBackgroundToScreen()
{
    bgImg = new Image(); 
    bgImg.src = document.body.background;

    if ((bgImg.height / window.innerHeight) < (bgImg.width / window.innerWidth))
        document.body.style.backgroundSize = "auto 100%";
    else
        document.body.style.backgroundSize = "100% auto";
};    
</script>

Diese Funktion ist das einzige, was Sie brauchen. Sie muss mit dem window.onresize -Ereignis und vom body.onload -Ereignis aufgerufen werden. Das Bild muss Hintergrundwiederholung sein: Keine Wiederholung; Hintergrundaufsatz: feststehend;

<script language="Javascript">
window.onresize=function(){FixBackgroundToScreen();};
</script>

<body onload="FixBackgroundToScreen();">

Sie können die Funktion auf meiner Website sehen www.andreamarulla.it

Sorry für mein Englisch ... Andrea ;-)