J'aimerais mettre une image en arrière-plan d'une page Web mais la décaler d'un certain nombre de pixels par rapport au centre.
Comment puis-je faire ceci?
Je veux:
background-image: url("bg.png");
background-position: 25% center;
background-attachment: fixed;
background-repeat: no-repeat;
mais au lieu de 25%, je veux quelque chose du genre "center - 50px". Y a-t-il une solution à cela?
L'utilisation de background-position: center; est identique à background-position: 50% 50%; .
Vous pouvez donc utiliser calc pour faire des calculs simples en CSS en remplacement de n'importe quelle valeur de longueur, par exemple :
background-position: calc(50% - 50px) 50%;
Centrera l'image d'arrière-plan, mais la déplacera de 50 pixels vers la gauche.
Il n'y a pas de réponse CSS évidente. Vous devrez soit utiliser JavaScript pour calculer les valeurs, soit faire quelque chose de délicat. Vous pouvez essayer de conserver le background-position:25% center et d'ajouter position:relative;left:-50px ou margin-left:-50px mais cela peut ne pas fonctionner selon la façon dont vous utilisez l'élément DOM.
La seule méthode que j'ai trouvée pour cela est d'avoir l'arrière-plan dans une autre div, puis d'utiliser javascript pour repositionner ...
<style>
body {
width: 100%;
overflow: hidden;
}
#bg {
position: absolute;
background: url(images/background.jpg) center top;
}
</style>
<script>
function recenter(){
var $pos = $('#content').offset().left;
$('#bg').css('left',$pos-580);
}
recenter();
$(window).resize(function(){ recenter(); });
</script>
<body>
<div id="bg"></div>
<div id="content">
blah
</div>
</body>
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
