webentwicklung-frage-antwort-db.com.de

Vollbild-Hintergrundbild

Ich bin sehr neu in Front-End-Entwicklung und Foundation.

Ich versuche, <div class="main-header"> ein Vollbild zu erhalten, das ansprechend verkleinert wird. 

Kann mir jemand sagen, was ich falsch mache? Es wird korrekt skaliert, zeigt jedoch nicht das vollständige Bild. Ich wollte auch, dass der <div class="large-6 large-offset-6 columns"> auf einem mobilen Gerät darüber sitzt - ist das möglich?

Das HTML: 

<!-- MAIN HEADER -->
<div class="main-header">
   <div class="row">
     <div class="large-6 large-offset-6 columns">
       <h1 class="logo">BleepBleeps</h1>
       <h3>A family of little friends<br>that make parenting easier</h3>
     </div> <!-- END large-6 large-offset-6 columns -->
   </div><!-- END ROW -->
</div><!-- END MAIN-HEADER -->

Das CSS:

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

h1.logo {
    text-indent: -9999px;
    height:115px;
    margin-top: 10%;
}
45
Tom Rogers

http://css-tricks.com/perfect-full-page-background-image/

//HTML
<img src="images/bg.jpg" id="bg" alt="">

//CSS
#bg {
  position: fixed; 
  top: 0; 
  left: 0; 

  /* Preserve aspet ratio */
  min-width: 100%;
  min-height: 100%;
}

OR

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}

OR

//HTML
<img src="images/bg.jpg" id="bg" alt="">

//CSS
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

//jQuery
$(window).load(function() {    

        var theWindow        = $(window),
            $bg              = $("#bg"),
            aspectRatio      = $bg.width() / $bg.height();

        function resizeBg() {

                if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
                    $bg
                        .removeClass()
                        .addClass('bgheight');
                } else {
                    $bg
                        .removeClass()
                        .addClass('bgwidth');
                }

        }

        theWindow.resize(resizeBg).trigger("resize");

});
82
Plummer
<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>
22
9pixle

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/

7
cn123h

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.

5
Anil kumar

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

4
Pavan S

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 */
}
3
MXLink

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.

2
Joshua Pinter

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

2
Tony Wu

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>

0
maestro888
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;
}
0
Manish

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.

0
Michael Mudge

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

0
Ashok

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

0
AL FAISAL MIA

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

0
rec1978