change background image in body

Question

How do i change the background image in CSS  at run time  I have the following background image in body and can the image be changed at run time    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

User · Answer

You would need to use Javascript for this. You can set the style of the background-image for the body like so.

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

Just make sure you replace the URL with the actual URL.

User · Answer

Just set an onload function on the body     lt body onload  init    gt    Then do something like this in javascript   function init       var someimage    changableBackgroudImage     document body style background    url img   someimage   png  no-repeat center center      You can change the  someimage  variable to whatever you want depending on some conditions  such as the time of day or something  and that image will be set as the background image

User · Answer

If you have JQuery loaded already  you can just do this      body   css  background-image    url    images backgrounds header-top jpg       EDIT   First load JQuery in the head tag    lt script src    ajax googleapis com ajax libs jquery 1 7 2 jquery min js  type  text javascript  gt  lt  script gt    Then call the Javascript to change the background image when something happens on the page  like when it finishes loading    lt script type  text javascript  gt        document  ready function                body   css  background-image    url    images backgrounds header-top jpg              lt  script gt

User · Answer

If you re page has an Open Graph image  commonly used for social sharing  you can use it to set the background image at runtime with vanilla JavaScript like so    lt script gt    const meta   document querySelector   property  og image        const body   document querySelector  body      body style background    url   meta content      lt  script gt    The above uses document querySelector and Attribute Selectors to assign meta the first Open Graph image it selects  A similar task is performed to get the body  Finally  string interpolation is used to assign body the background style the value of the path to the Open Graph image   If you want the image to cover the entire viewport and stay fixed set background-size like so   body style background    url   meta content   center center no-repeat fixed   body style backgroundSize    cover     Using this approach you can set a low-quality background image placeholder using CSS and swap with a high-fidelity image later using an image onload event  thereby reducing perceived latency

[javascript] change background image in body

Examples related to javascript

Examples related to css