javascript - Full page size background image -


i have background image html page. set through css style:-

html{      margin-top:10px;     background: url(xxxxx.jpg) no-repeat center center fixed;      background-size: cover; } 

i want know how can change dynamically javascript side.

i have tried like:

document.getelementbyid("html").style.backgroundimage = "url('yyy.jpg')"; 

but doesn't change image.

without using jquery, how can access html element , change bkimage, every 5 seconds make slideshow. (i storing image urls in array).

the background image not tied html tag body tag. try:

body {    background-image: url(xxxxx.jpg);  } 

and script:

document.getelementsbytagname("body")[0].style.backgroundimage = "url('zzzzz.jpg')"; 

if works expected (you see zzzzz.jpg, not xxxxx.jpg) you're ready fix rest of css code.

edit: tested code , fixed bug. must assign backgroundimage = "url('zzzzz.jpg')", not filename i've written before.

as example, works perfectly, need 2 images (red.jpg , blue.jpg):

<html>   <head>     <style>       body       {          background-image: url('red.jpg');       }     </style>   </head>   <body>     <script>       document.getelementsbytagname("body")[0].style.backgroundimage = "url('blue.jpg')";     </script>   </body> </html> 

edit 2:

the rest of css must not change, you'll still have:

body {   margin-top: 10px;   background: url('xxxxx.jpg') no-repeat center center fixed;   background-size: cover; } 

the background property compound:

  background: url('xxxxx.jpg') no-repeat center center fixed;               ^                ^         ^      ^               url              r         h      v    url: image url   r: repetition   h: horizontal alignment   v: vertical alignment 

with

background-image: url('xxxxx.jpg') 

you change url part of above compound, leaving rest was. if image small might stretched cover whole screen. slide show sure images have same size.


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -