web-dev-qa-db-fra.com

changer l'image de fond dans le corps

Comment puis-je changer l'image de fond en CSS au moment de l'exécution? J'ai l'image d'arrière-plan suivante dans le corps et l'image peut-elle être modifiée au moment de l'exécution? 

body {
height: 100%;
background: #fff8db url(../images/backgrounds/header-top.jpg) no-repeat center top; 
/*background-color: #fff8db;*/
/*background-size: 1650px 900px;*/
font-family: Arial, Verdana, Helvetica, sans-serif; 
font-size:12px; 
font-weight:normal; 
color:#404040;
line-height:20px; }
javascriptcss
22
VeecoTech

Si vous avez déjà chargé JQuery, procédez comme suit:

$('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');

MODIFIER:

Commencez par charger JQuery dans la balise head:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>

Ensuite, appelez le Javascript pour changer l'image de fond quand quelque chose se passe sur la page, comme lorsque le chargement est terminé:

<script type="text/javascript">
    $(document).ready(function() {
        $('body').css('background-image', 'url(../images/backgrounds/header-top.jpg)');
    });
</script>
21
nathancahill

Vous aurez besoin d'utiliser Javascript pour cela. Vous pouvez définir le style du background-image pour le corps comme suit.

var body = document.getElementsByTagName('body')[0];
body.style.backgroundImage = 'url(http://localhost/background.png)';

Assurez-vous simplement de remplacer l'URL par l'URL actual .

54
user672118

Il suffit de définir une fonction onload sur le corps: 

<body onload="init()">

Ensuite, faites quelque chose comme ça en javascript:

function init() {
  var someimage = 'changableBackgroudImage';
  document.body.style.background = 'url(img/'+someimage+'.png) no-repeat center center'
}

Vous pouvez remplacer la variable "someimage" par ce que vous voulez, en fonction de certaines conditions, telles que l'heure du jour ou autre, et cette image sera définie comme image d'arrière-plan.

5
jimjimmy1995

Si votre page contient un Open Graph image, couramment utilisé pour le partage sur les réseaux sociaux, vous pouvez l’utiliser pour définir l’image d’arrière-plan au moment de l’exécution avec JavaScript activé comme ceci:

<script>
  const meta = document.querySelector('[property="og:image"]');
  const body = document.querySelector("body");
  body.style.background = `url(${meta.content})`;
</script>

Ce qui précède utilise document.querySelector et Sélecteurs d’attributs à attribuermeta la première image Open Graph qu’elle sélectionne. Une tâche similaire est effectuée pour obtenir la variable body. Enfin, string interpolation permet d'assigner à body le background.style la valeur du chemin d'accès à l'image Open Graph.

Si vous voulez que l'image couvre la totalité de viewport et reste fixe, définissez background-size like de la manière suivante:

body.style.background = `url(${meta.content}) center center no-repeat fixed`;
body.style.backgroundSize = 'cover';

Avec cette approche, vous pouvez définir un espace réservé d’image d’arrière-plan de qualité médiocre à l’aide de CSS et permuter ultérieurement avec une image haute fidélité à l'aide d'un événement image onload, réduisant ainsi le temps de latence perçu.

0
Josh Habdas