When I click my button , a random image that I put in my array is supposed to be generated as the background image for my webpage page. My array contains a group of objects, an object that stores the name of the album and the image link to all of the images for the album. The links for the album images work , because I copied and pasted the links of the image in the web address bar and the image is displayed.
When I click the button, I want the image that is supposed to be generated to cover the entire page as well.
When I click my button, no image is generated.
What am I doing wrong? My link is listed below:
Update: I got my button to generate random images, but those images that are generated don’t covere the whole page. What do I do to change that dillemma?
you are changing an image element, it will not be the background image on its own, you need to use the code to set the image as backgronud.
instead I think you want to set the image as background image for the page body
something like explained here, maybe?
Thanks that worked. Is there a way to scale back the image without changing the size of the image? My background images kind of look a little too blurry.https://codepen.io/noblegas/pen/bGdYvvQ
if you do some research on the
backround rule I think you will find something to do what you want. I have not much used it.
nothing makes image less blurry, if the current size exceed the original size. But you can find a way to make sure that the image retains original size, be that as single image, or repeated multiple times to fill all the space.