Use javascript for a background image

Question

I have looking other post for this problem (because there are, of course). But I even didn't succeed with the answer of these other post.

Then, my issue :

I have the following script to open an image randomly

<script> function banner()
{var img = new Array();
img[0]='images/hochbau1.jpg';
img[1]='images/hochbau2.jpg';
img[2]='images/hochbau3.jpg';
img[3]='images/hochbau4.jpg';
img[4]='images/hochbau5.jpg';
img[5]='images/hochbau6.jpg';
img[6]='images/hochbau7.jpg';
img[7]='images/hochbau8.jpg';
img[8]='images/hochbau9.jpg';
img[9]='images/hochbau10.jpg';
var n=Math.round((Math.random()*9));
document.write(img[n]);
} </script>

Then, I would like to have this images in this (instead of images/hochbau.jpg) :

 <div class="section22" style="background-image:url(images/hochbau.jpg); "> </div>

Then, I tried this:

 <div class="section22" style="background-image:url(<script> banner(); </script>);"> </div>

or this

<div class="section22" style="background-image:url(
                   <script type="text/javascript" language="javascript">
                       document.write('images/hochbau'+ Math.round((Math.random()*9)+1)+ '.jpg');
                  </script>
                  ); "> </div>

Then, I changed the script as :

<script> function banner()
{var img = new Array();
img[0]='images/hochbau1.jpg';
img[1]='images/hochbau2.jpg';
img[2]='images/hochbau3.jpg';
img[3]='images/hochbau4.jpg';
img[4]='images/hochbau5.jpg';
img[5]='images/hochbau6.jpg';
img[6]='images/hochbau7.jpg';
img[7]='images/hochbau8.jpg';
img[8]='images/hochbau9.jpg';
img[9]='images/hochbau10.jpg';
var n=Math.round((Math.random()*9));
document.getElementById('myPElement').style.backgroundImage = 'url(img[n])';

} </script>

with the following

<div class="section22" id="myPElement">

But nothing is working..... maybe I am closed to the solution but I am stuck...

if you have some observation, please tell me ! many thanks for your help

it should be document.getElementById('myPElement').style.backgroundImage = 'url(' +img[n]+')'; — Yordan Nikolov
– Yordan Nikolov, Commented Jun 23, 2017 at 9:28
Possible duplicate of stackoverflow.com/questions/15231812/… — Sagar
– Sagar, Commented Jun 23, 2017 at 9:30
Right Billz..... i am trying now to use fiddel... i am not used using it.... I never used it before.... jsfiddle.net/95d3233v — Timama
– Timama, Commented Jun 24, 2017 at 11:16

Matus · Accepted Answer · 2017-06-23 11:11:51Z

2

You are just not referencing the image correctly in your script

<script> function banner()
{var img = new Array();
img[0]='images/hochbau1.jpg';
img[1]='images/hochbau2.jpg';
img[2]='images/hochbau3.jpg';
img[3]='images/hochbau4.jpg';
img[4]='images/hochbau5.jpg';
img[5]='images/hochbau6.jpg';
img[6]='images/hochbau7.jpg';
img[7]='images/hochbau8.jpg';
img[8]='images/hochbau9.jpg';
img[9]='images/hochbau10.jpg';
var n=Math.round((Math.random()*9));
document.getElementById('myPElement').style.backgroundImage = 'url(' + img[n] +')';  //you are passing img[n] as string, just change this

} </script>

EDIT: I see your page: http://www.mytmedia.craym.eu/HRPwebsite/index.php

from the code inspect I see banner() function is never executed, and also if I try to execute it in the console the backround image is set correcty but your iamges are not there:

edited Jun 23, 2017 at 11:11

answered Jun 23, 2017 at 9:29

Matus

1,41913 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Timama Over a year ago

Many thanks.... i have tried that too .. and retried after you post.. but that doens't work.... i don't know why !

Matus Over a year ago

Do you see any error in the console? make sure your "myPElement" is defined before you execute the banner function. Also, in your code example I don't see you actually calling the function, so please make sure you actually execute banner();

Timama Over a year ago

Banner is in <head>... i check "myPElement" ... many thanks for you help !

Pang · Accepted Answer · 2017-06-24 01:11:30Z

0

This should work

document.getElementById("myPElement").style.backgroundImage = "url("+img[n]+")";

edited Jun 24, 2017 at 1:11

Pang

10.2k146 gold badges87 silver badges126 bronze badges

answered Jun 23, 2017 at 9:33

Bhaktuu

891 silver badge7 bronze badges

1 Comment

Bhaktuu Over a year ago

Please try debugging the function. Add also you can try evaluating the code in console.

Timama · Accepted Answer · 2017-06-25 14:53:37Z

hi and many thanks for your help....

The things which was wrong in my code was : 1- using a function in script. I had to just using script but without "function" 2- and of course the form 'url(img[n])' wich was wrong..

The code wich work for me (i have tested on local, i had to test it online)

                <div id="myPElement" class="section22" ></div>
            <script> 
                var img = new Array();
                img[0]='http://localhost:8888/images/hochbau1.jpg';
                img[1]='http://localhost:8888/images/hochbau2.jpg';
                img[2]='http://localhost:8888/images/hochbau3.jpg';
                img[3]='http://localhost:8888/images/hochbau4.jpg';
                img[4]='http://localhost:8888/images/hochbau5.jpg';
                img[5]='http://localhost:8888/images/hochbau6.jpg';
                img[6]='http://localhost:8888/images/hochbau7.jpg';
                img[7]='http://localhost:8888/images/hochbau8.jpg';
                img[8]='http://localhost:8888/images/hochbau9.jpg';
                img[9]='http://localhost:8888/images/hochbau10.jpg';
                var n=Math.round((Math.random()*9));
                document.getElementById("myPElement").style.backgroundImage = "url(" + img[n] +")";
            </script>

Evrything is working now.... the photos appear randomly....

Many thank again for your help !

Collectives™ on Stack Overflow

Use javascript for a background image

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related