web-dev-qa-db-fra.com

Image d'arrière-plan d'une section d'un site responsive qui ne s'affiche pas

Fondamentalement, je construis un site responsive en HTML5 pour la première fois et dire qu'avoir beaucoup de problèmes serait une sous déclaration. Quoi qu’il en soit, l’un des problèmes auxquels je suis actuellement confronté est que je ne peux pas comprendre comment obtenir une image dont j'ai besoin pour une section de bannière à afficher!

Voici ce que j'essaie d'atteindre:

enter image description here

Mais je ne peux pas obtenir l'image d'onde à afficher sans la mettre en ligne, ce que je ne veux pas faire, car elle doit être réactive!?

voici mon code html jusqu'à présent:

<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 idées qui pourraient aider, cela serait vraiment apprécié! Je ne comprends vraiment pas pourquoi l'image d'arrière-plan ne s'affiche pas uniquement une fois qu'elle a été définie dans le fichier css! Quand j’avais un curseur en place, cela fonctionnait bien, mais dès que j’ai retiré le curseur et que j’ai opté pour une image statique, il n’apparaît plus>

csshtml5imagecss3
5
DannyW86

Utilisez ceci dans un fichier HTML.

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

Remarque: Placez l'image dans le dossier principal et non dans le dossier images.

4
Sushant Tayade

Votre classe de bannière semble manquer de largeur et de hauteur, elle risque donc de s’effondrer. Pouvez-vous vérifier dans la console développeur de votre navigateur?

0
trnelson

Cet article est peut-être vieux, mais voici la réponse à ceux qui sont venus ici pour obtenir une réponse.

ajouter les lignes suivantes au .banner dans le style css

height: 100%;
width: 100%;

Si vous voulez une largeur personnalisée, vous pouvez jouer avec le pourcentage, mais si vous voulez une largeur et une hauteur spécifiques dans PX, vous pouvez effectuer les opérations suivantes:

height: 500px;
width: 1000px;

Modifiez la largeur et la hauteur en fonction de la largeur et de la hauteur souhaitées.

0
iStudLion