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
Post a Comment