Responsive images d'arrière-plan bootstrap 3

Je suis en utilisant bootstrap et suis en train de faire mes images d'arrière-plan sensible, mais sa ne marche pas! Voici mon code...

html

<div class="row">
    <div class="bg">
        <img src="../img/home_bg.jpg" alt="home background image">
    </div><!-- /.bg -->
</div><!-- /.row -->

css

.bg {
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

S'il vous plaît aidez-moi! Merci!!!!

pouvez-vous créer un jsfiddle veuillez
aussi, un assez évidente erreur, c'est que <img> n'est pas un arrière-plan, de sorte que le css que vous avez dans .bg l'habitude de faire une différence, sauf si vous déclarez un background-image dans le css
Merci... je n'ai pas créé un jsfiddle avant, je vais jeter un oeil maintenant, je suis très nouveau pour le codage si nu avec moi!
pas de problème, nous avons tous été débutants une fois!
J'ai ajouté background-image: url(../img/home_bg.jpg); à mon css, et a pris la <img...> dans le code html, mais il ne fonctionne toujours pas..
avez-vous l'esprit annonce de la jsfiddle lien?
bien sûr, jsfiddle.net/KeepC32/8L9Ty
malheureusement, il n'existe aucun moyen d'une image de fond pour remplir un div sans jeu de paramètre de hauteur ou de largeur etc. cependant, c'est le meilleur que je pouvais venir étant donné mon peu de temps jsfiddle.net/8L9Ty/3

InformationsquelleAutor user3541921 | 2014-05-21

13

Vous avez besoin pour lire un peu plus sur la différence entre les images de fond et des images en ligne. Vous ne pouvez pas le style d'une balise img en arrière-plan, c'est un élément de niveau bloc, et coule avec le document. Une image d'arrière-plan est une propriété d'un élément. Puisque vous voulez cette image pour l'arrière-plan de l'ensemble de la page, vous pouvez appliquer l'image d'arrière-plan pour le html ou des éléments du corps.

http://jsfiddle.net/8L9Ty/3/
```
body {
    background: url('http://placekitten.com/900/900');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
```
InformationsquelleAutor fontophilic

Je suis d'essayer depuis si longtemps, et finalement, j'ai trouvé que dans le bootstrap 3.3.5 vous devez utiliser la hauteur et la largeur de propriété pour définir l'arrière-plan.
J'ai utilisé le code suivant:

.header{
    background-image: url(images/header.png); 
    height: 500px;

    width: 100%;
    background-repeat: no-repeat;

    background-position: center center;
    background-attachment: fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;

    -o-background-size: cover;
    background-size: cover;
}

InformationsquelleAutor Mursedul Islam Sumon

1

Puisque vous ne mentionnez pas l'image de fond pour votre "DIV" tag. Je suppose que vous voulez appliquer l'arrière-plan de l'image pour la totalité de votre page. Est-ce ce que vous recherchez ?

Feuille de style
```
 body {
    background: url('http://i.stack.imgur.com/jGlzr.png') repeat-x, repeat-y;
 }
```
Partie HTML
```
<body>
<div class="row">
<div class="bg">

</div>
</div>
</body>
```
http://jsfiddle.net/AziziMusa/8L9Ty/5/
- Merci.. Oui, je veux l'image pour l'adapter à la loi comme de l'ensemble de fond... j'ai essayé ce que vous avez dit et il a fait de l'image s'adaptent correctement mais n'est pas réactif! Si il y a un autre moyen plus facile sans l'aide d'un div (ce n'était que la première chose que j'ai pensé) alors ce serait super ...
InformationsquelleAutor Azizi Musa

supprimer la balise img <img src="../img/home_bg.jpg" alt="home background image"> et de le faire avec css comme ci-dessous :

html

<div class="row">
  <div class="bg"></div><!-- /.bg -->
</div><!-- /.row -->

css

.bg {
    background-image: url('../img/home_bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

InformationsquelleAutor Moe Shaaban

CSS:

            body, html {
                height: 100%;
                margin: 0;
            }

            .bg {
                /* Full height */
                height: 100%;

                /* The image used */
                background-image: url("https://picsum.photos/id/1/200/300");

                /* Center and scale the image nicely */
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
            }

HTML:

    <div class="container-fluid bg" >

    </div>

InformationsquelleAutor antelove

Vous devez vous connecter pour publier un commentaire.