CSS Tendu Image d'arrière-plan

J'ai une grande image à utiliser comme un background-image d'une page. Ce que je veux, c'est que la hauteur de l'image sera étirée pour remplir la hauteur de la page. Il devrait être centré aussi.

background: black url("/image/background.jpg") no-repeat fixed center;

OriginalL'auteur JR Galia | 2013-01-09

  1. 16

    background-size: cover fera l'affaire dans les navigateurs modernes - voir mozilla la documentation pour plus de détails.

    Pour les navigateurs plus anciens (en particulier les anciennes versions d'IE), j'ai eu beaucoup de succès avec les plugins jQuery comme cette une pour émuler le comportement.

    ce fixe: background-size: 1024px 100%;
    Heureux d'être en mesure de vous diriger dans la direction de ce que vous avez besoin 🙂
    je n'arrivais pas à le faire fonctionner avec la background tag, mais background-size: cover semble bien fonctionner.

    OriginalL'auteur Kelvin

  2. 4

    ici est un bon writeup

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

    l'essentiel étant

    body { 
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;
}

    OriginalL'auteur foundry

  3. 0

    ajoutez à cela le css

    {
background: black url("/image/background.jpg") no-repeat fixed center;
height: 100%;
width:100%
}
    De Kelvin réponse est parfait si l'image est en fait plus grande que l'espace que vous voulez mettre dans et des cultures , un réglage de la largeur et de la hauteur permet d'étirer l'image

    OriginalL'auteur Scott Selby

  4. 0

    Je pense que l'utilisation d'un div serait la façon la plus simple pour obtenir l'effet que vous recherchez.

    <div id="background">
    <img src="/image/background.jpg" class="stretch" alt="" />
</div>
    <style>
    #background {
        background-color:#000000;
        width: 100%; 
        height: 100%; 
        position: fixed; 
        left: 0px; 
        top: 0px; 
        z-index: -1;
    }

    .stretch {
        width:100%;
        height:100%;
    }
    </style>

    OriginalL'auteur Devon Bernard