Plein écran sensible de l'image de fond en CSS
Je veux faire cette image comme l'image de fond de ma page web. Cependant , le problème est que l'image ne couvre pas la totalité de la page, comme vous pouvez le voir dans cet aperçu , et il répété à l'extrême droite . Est-il un moyen pour que l'image couvre l'ensemble de la page (de toute façon , les étirements , le re-dimensionnement , ou quelque chose de nouveau).
Mon Code:
<!DOCTYPE HTML>
<html>
<head>
<title>Angry Birds Star Wars</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<style>
body {
background: url('http://www.androidtapp.com/wp-content/uploads/2012/11/Angry-Birds-Star-Wars-Menu.png');
}
</style>
</head>
<body></body>
</html>
Grâce.
Mise à JOUR:
J'ai maintenant enfin en venir à croire qu'il n'y a presque rien que vous pouvez obtenir l'image pour l'adapter exactement à mon écran de PC. Je suis maintenant ok , et je suis d'aller plus loin , s'il vous plaît ne pas envoyer des réponses maintenant.
OriginalL'auteur Gaurang Tandon | 2013-09-01
Vous devez vous connecter pour publier un commentaire.
jsBin démo
Le
fixed
(background-attachment) est facultatif.Ci-dessus est juste un raccourci pour:
Vous avez peut dans tous les navigateurs modernes mais Safari utilisation:
où la
/
est utilisé dans le contexte d'abréviation pour séparer et de distinguerposition
desize
(cause position accepte à la fois unique et multiple (X,Y) les valeurs), mais Safari a un bug avec ce/
abréviation ainsi l'utiliser comme décrit ci-dessus.Comment est cette réponse différente de ma réponse?
href="http://caniuse.com/#search=background-size" >caniuse.com/#search=background-size 🙂
Donc, fondamentalement, votre version manque de soutien pour les anciens navigateurs. La droite.
les anciens navigateurs n'ont pas
background-cover
à tous, donc veuillez expliquer votre déclarationOriginalL'auteur Roko C. Buljan
Utiliser le
background-size
d'attributs et de définir l'arrière-plan répéter àno-repeat
.Comme ceci:
Voir ce jsFiddle
C'est à cause de
center center
de positionnement. Il suffit de changer àtop left
si vous voulez que l'image d'arrière-plan pour être ancré dans le coin supérieur gauche de l'image.C'est le couper de même plus ,
center center
était mieuxOriginalL'auteur cubrr
Ensemble de votre image d'arrière-plan
vous ne pouvez pas l'utiliser comme ça, les faire séparer les attributs comme background-image et background-size
OriginalL'auteur slash197
devrait faire l'affaire. Remarquez - vous pouvez combiner position & répéter dans le fond initiale de l'attribut
Et appliquer
OriginalL'auteur Sgoldy
Vous pouvez toujours utiliser une position absolue div à 100% de la largeur et de la hauteur avec un z-index de sorte qu'il peut être un arrière-plan, alors vous pouvez insérer l'image, avec le même css.
grâce
z-index
il n'y a absolument pas besoin de régler des z-index dans ce cas.OriginalL'auteur designerNProgrammer