web-dev-qa-db-fra.com

Image de fond Jumbotron Bootstrap sensible

J'utilise bootstrap jumbotron, y compris une image de fond. Le redimensionnement de l’écran rend l’image en mosaïque et la répétition, alors que je souhaite que l’image soit redimensionnée en conséquence.

<div class="jumbotron" style="background-image: url(http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg); background-size: 100%;">
   <div class="container for-about">
   <h1>About</h1>
   </div>
</div>

Comment feriez-vous pour rendre l'image sensible? Le site est ICI . Merci pour vos idées!

csscss3twitter-bootstrapresponsive-design
26
Nick B

Le moyen le plus simple consiste à définir la taille de l'arrière-plan sur "couverture".

.jumbotron {
  background-image: url("../img/jumbotron_bg.jpg");
  background-size: cover;
}

Steve

42
Steve

C'est ce que j'ai fait.
Commencez par remplacer la classe jumbotron et procédez comme suit: 

.jumbotron{
    background: url("bg.jpg") no-repeat center center; 
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
}

Donc, vous avez maintenant un jumbotron avec un arrière-plan réactif en place ..__ Cependant, comme Irvin Zhan a déjà répondu, la hauteur de l'arrière-plan ne s'affiche toujours pas correctement.

Une chose que vous pouvez faire est de remplir votre div avec des espaces tels que celui-ci:

<div class="jumbotron">
    <div class="container">
        About
        <br><br><br> <!--keep filling br until the height is to your liking-->
    </div>
</div>

Ou, plus élégamment, vous pouvez définir la hauteur du conteneur. Vous voudrez peut-être ajouter une autre classe afin de ne pas remplacer la classe de conteneur Bootstrap.

<div class="jumbotron">
    <div class="container Push-spaces">
        About
    </div>
</div>

.Push-spaces
{
    height: 100px;
}
7
Fadils

J'ai trouvé que cela fonctionnait parfaitement pour moi:

.jumbotron {
background-image: url(/img/Jumbotron.jpg);
background-size: cover;
height: 100%;}

Vous pouvez redimensionner votre écran et il occupera toujours 100% de la fenêtre.

5
Justin

TLDR: Utilisez background-size: 100% 100%;. 

background-size: cover; peut couper certaines parties de l'image et produire des résultats médiocres.

En utilisant background-size: 100% 100%;, vous forcez l'image à reprendre 100% de l'élément parent à la fois pour height et width.

Voir W3Schools pour plus d’informations à ce sujet.

Voici une image d'arrière-plan jumbotron réactive et active:

<div class="jumbotron"  style="background-image: url(http://yourImageUrl.jpg); background-size: 100% 100%;">
    <h1>Welcome</h1>
    <p class="lead">Your message here</p>
    <p><a href="http://www.YourLinkHere.com" class="btn btn-primary btn-lg">Learn more &raquo;</a></p>
</div>
3
maxshuty

Voici comment je fais:

<div class="jumbotron" style="background: url(img/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
  <h1>Hello</h1>
</div>

3
JustRocca

Malheureusement, il n'y a aucun moyen de faire en sorte que la hauteur de div réponde à la taille de l'arrière-plan . La solution la plus simple que j'ai utilisée consiste à ajouter une balise img dans votre jumbotron contenant cette image d'arrière-plan. 

2
Irvin Zhan

Le code ci-dessous fonctionne pour tous les écrans:

.jumbotron {
   background: url('backgroundimage.jpg') no-repeat center center fixed;
   -webkit-background-size: cover;
   -moz-background-size: cover;
   background-size: cover;
   -o-background-size: cover;
}

La propriété cover redimensionnera l’image d’arrière-plan afin de couvrir l’ensemble du conteneur, même si elle doit étirer l’image ou couper un peu l’un des bords.

1
Dhanesh Agrawal

Vous pouvez essayer ceci: 

Il suffit de placer le code dans une balise de style dans la tête du fichier html 

<style>
        .jumbotron {
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        }
</style>

ou le mettre dans un fichier css séparé comme indiqué ci-dessous 

        .jumbotron {
            background: url("http://www.californiafootgolfclub.com/static/img/footgolf-1.jpg") center center / cover no-repeat;
        }

utilisez center center pour centrer l’image horizontalement et verticalement . Utilisez cover pour que l’image remplisse l’espace jumbotron et enfin no-repeat afin que l’image ne se répète pas.

0
Joan