web-dev-qa-db-fra.com

Image de fond réactif plein écran

Je suis très nouveau pour le développement et la fondation Front-end.

J'essaie de faire en sorte que <div class="main-header"> soit une image en plein écran qui diminue progressivement. 

Quelqu'un peut-il me dire ce que je fais mal? L'échelle est correctement mise à l'échelle, mais ne montre pas l'image complète. Je voulais aussi que le <div class="large-6 large-offset-6 columns"> soit installé au-dessus sur un appareil mobile - est-ce possible?

Le 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 -->

Le 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%;
}
cssresponsive-designfullscreenzurb-foundation
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

Un indice sur la solution "background-size: cover", vous devez la mettre après la définition de "background", sinon cela ne fonctionnera pas, par exemple cela ne fonctionnera pas:

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

J'ai eu le même problème avec mon site de pré-lancement EnGrip . Je suis allé vivre avec ce problème. Mais après quelques essais, cela a finalement fonctionné pour moi:

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;

solution pure CSS. Je n'ai pas de solution JS/JQuery ici. Même suis nouveau dans ce développement d'interface utilisateur. Je pensais juste que je partagerais une solution qui fonctionne depuis que j'ai lu ce fil hier.

5
Anil kumar

Personnellement, je ne recommande pas d'appliquer le style sur une balise HTML, cela pourrait avoir After Effects quelque part plus tard du développement. 

je suggère donc personnellement d'appliquer la propriété background-image à la balise body.

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

Cette simple astuce a résolu mon problème. cela fonctionne pour la plupart des écrans plus grands/plus petits. 

il y a tellement de façons de le faire, j'ai trouvé cela le plus simple avec minimum After Effects

4
Pavan S

pour l'image de fond sensible plein écran

régler la hauteur css (hauteur: 100vh)

exemple :

.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

Backstretch

Découvrez ce plug-in one-liner qui redimensionne une image d’arrière-plan de manière réactive.

Tout ce que vous devez faire c'est:

1. Inclure la bibliothèque:

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

2. Appelez la méthode:

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

Je l'ai utilisé pour un simple site "site en construction" que j'avais et cela fonctionnait parfaitement.

2
Joshua Pinter

Essaye ça:

<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

Simple en plein écran et image centrée 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

Je dirais, dans votre fichier de mise en page, donnez un 

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

puis dans votre css faire 

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

Et assurez-vous d’avoir l’image d’arrière-plan dans votre application/ressources/images et modifiez 

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

'background.png' à votre propre image d'arrière-plan.

0
Michael Mudge

Vous pouvez également créer une section de bannière plein écran sans utiliser JavaScript, une section de bannière plein écran responsive basée sur css, en utilisant height: 100vh; dans la bannière principale div, voici un exemple en direct pour cela

#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

En utilisant ce code ci-dessous: 

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

Esperons que ça marche. Merci

0
AL FAISAL MIA

J'ai effectué cette fonction javascript: elle fixe votre image d'arrière-plan à la taille de votre écran, dans la dimension la plus significative (largeur od height) sans modifier le rapport de format de l'image.

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

Cette fonction est la seule chose dont vous avez besoin. Il doit être appelé avec l'événement window.onresize et à partir de l'événement body.onload. L'image doit être répétée en arrière-plan: non répétée; attachement de fond: fixe;

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

<body onload="FixBackgroundToScreen();">

Vous pouvez voir la fonction sur mon site www.andreamarulla.it

Désolé pour mon anglais ... Andrea ;-)

0
rec1978