web-dev-qa-db-fra.com

Image de fond utilisant HTML5 pour s'adapter à la page

Je veux faire d'une image l'arrière-plan complet d'un site web! Je sais que cela semble assez simple, mais cela me rend fou, cela ne correspond pas à la page, c'est le dernier essai auquel j'ai réussi!

CSS:

body {
background:url('images/bg_img1.jpg') #A98436 no-repeat left top;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}

J'utilise aussi Twitter Bootstrap, mais le problème est que même sans cela, je ne peux pas le faire correctement!

Toute aide serait appréciée.

EDIT: et je n’ai pas utilisé les pixels exacts car j’essaie de créer un design responsive + mobile.

Je ne sais pas pourquoi ils ont rétrogradé la question! Mais c'est comme ça que je l'ai résolu!

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


#mybody {
background:  url('images/bodybg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myheader {
background:  url('images/headerbg.jpg') no-repeat center left;
 background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}

#myfooter {
background: url('images/footerbg.jpg') no-repeat center left;
background-size: 100% 100%;
width: 100%;
height: 100%;
height: auto !important;
min-height:100%;
}
html5css3twitter-bootstrapbackground-image
9
0bserver07

EDIT: J'ai créé un DEMO avec quelques éléments inutiles supprimés. Cela a l'avantage de ne pas fenêtrer votre image de fond. Le DEMO fonctionne mais n'a pas été testé de manière aussi approfondie que le code cité ci-dessous.

J'ai récemment travaillé sur un projet où nous avions besoin de cette chose exacte. Je poste dans mes fichiers de projet, ce qui peut être inutile car c'est un membre de l'équipe qui l'a écrit.

Commencez par définir les propriétés du code HTML et du corps ..__ Ensuite, j'ai un div racine dans le corps appelé background.

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
#background {
    background: #000000 url(urlHere) no-repeat bottom left;
    background-size: 100% 100%;
    width: 100%;
    height: 100%;
    height: auto !important;
    min-height:100%;
}

Encore une fois, une partie de cela, j'en suis sûr, est inutile, mais j'espère que cela aidera.

13
Corey Horn

Vous pouvez le faire en ajoutant la propriété background-attachment: fixed;

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat;
  background-attachment: fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

DÉMO

Mais vous devez savoir que si le rapport entre la dimension de la page et celle de l’image sont différents, l’image peut être découpée dans une fenêtre.

MODIFIER

Si pour vous la hauteur est plus importante, changez le paramètre backround-size en containt:

body {
  background:url('http://dummyimage.com/1080/9494ff/0011ff.png') #A98436 no-repeat 50% 50%;
  background-attachment: fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  background-size: contain;
}

contient la démo

6
WooCaSh

Pourquoi ne pas importer les images dans Flash (programme Microsoft) et les convertir en images vectorielles (Vecteur: images dont la qualité n’est pas affectée (autant) lorsque vous modifiez la hauteur et la largeur). Après avoir ajusté le vecteur img (modification de la img à la résolution de votre plate-forme actuelle) enregistrez-le et appliquez-le à votre code HTML. Je conseillerais de faire une copie de sauvegarde, surtout si vous utilisez plusieurs plates-formes HTML pour différentes résolutions. 

0
StudenProg

Vous devez définir la hauteur du premier élément de la page.

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

Voir plus ici:

http://imasters.com.br/front-end/css/por-que-height-100-nao-funciona/

0
monteirobrena