Image d'arrière-plan pour un article dans un site responsive en n'affichant pas d'

Fondamentalement, je suis en construction d'un site responsive en HTML5 pour la première fois, et dire que je vais avoir beaucoup de mal serait une sous-déclaration. De toute façon l'un des problèmes im coincé avec pour le moment c'est que je ne peux pas comprendre comment en obtenir une image que j'ai besoin d'une section de bannière à afficher!

C'est ce que im essayant d'atteindre:

Image d'arrière-plan pour un article dans un site responsive en n'affichant pas d'

Mais je ne peux pas obtenir la vague image à afficher sans le mettre inline qui je n'ai pas envie de faire comme il doit être réactif!?

voici mon code html:

<header>
    <h1></h1><!-- Logo -->

        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">HOW IT WORKS</a></li>
                <li><a href="#">OUR CUSTOMERS</a></li>
                <li><a href="#">PRICING</a></li>
                <li><a href="#">PARTNERS</a></li>
            </ul>
        </nav>
</header><!-- End of header -->

<section class="container">
    <h2 class="hidden">Lorem Ipsum</h2>
        <div class="banner">

        </div>

</section><!-- End of slider content -->

et voici le css:

.container {
width:auto;
margin: 0 auto;
position:relative;
}

.banner {
background-image: url(../img/banner-lg.jpg);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;

}

Si quelqu'un a des entrées qu'ils pourraient aider ce serait vraiment apprécié! Je ne comprends vraiment pas pourquoi l'image de fond n'est pas tout simplement une fois qu'elle a été définie dans le css! Quand j'ai eu un curseur en place, il a bien fonctionné, mais dès que j'ai enlevé le curseur et est allé pour une image statique au lieu de cela, il n'apparaît plus>

Pouvez-vous poster le code avec l'image en ligne (qui permet d'obtenir l'effet désiré)?
<div class="titre"> <img src="../img/banner-lg.jpg)" /> </div> mais ça ne marche pas vraiment, car l'image est aligné à gauche et répète
essayez avec background-size:cover.

OriginalL'auteur DannyW86 | 2013-11-03

  1. 4

    Utiliser ce fichier html.

    <style type="text/css">
  body{
       background:url("image.jpg");
       background-size: cover;       /* For flexibility */
       }
</style>

    Note: vous pouvez Mettre l'image dans le dossier principal pas dans le dossier d'images.

    OriginalL'auteur Sushant Tayade

  2. 0

    Votre bannière de la classe semble être en manque de largeur et de hauteur de sorte qu'il peut être en train de s'effondrer. Pouvez-vous vérifier dans la console développeur de votre navigateur?

    OriginalL'auteur trnelson

  3. 0

    Ce post peut-être vieux, mais voici la réponse pour ceux qui sont venus ici pour obtenir la réponse.

    ajouter les lignes suivantes à la .banner dans le style css chose

    height: 100%;
width: 100%;

    Si vous voulez largeur, vous pouvez jouer avec le pourcentage, mais si vous voulez une largeur et une hauteur en PX, vous pouvez effectuer les opérations suivantes

    height: 500px;
width: 1000px;

    Modifier la largeur et la hauteur de votre largeur et la hauteur désirées.

    OriginalL'auteur iStudLion