Change
background image with javascript

Question

I've this in my html file

<div class="change">
            <div id="changed" onclick="change_DImage()">New Upload...</div>
            <input id="browse" type="file" onchange="ImagLoc()">
</div>

and this in javascript file

function change_DImage(){
          document.getElementById("browse").click();  
    }
function ImagLoc(){
          var x = (document.getElementById("browse").value).toString();
          var ImgId = x.substr(12,6);
          var NewImg = "url('./image/MyAlbum/" + ImgId + "')";
          document.getElementById("dailyPic").style.backgroundImage = NewImg;
}

it's work pretty well but when I refresh my browser it'll change back to the default

for this in css file

background-image: url("../image/smokebird.jpg");

try with [`local storage`](https://www.google.co.in/url?sa=t&source=web&rct=j&url=https://www.w3schools.com/html/html5_webstorage.asp&ved=0ahUKEwiNmdDmzZTUAhWKpY8KHSU-DVUQFggcMAA&usg=AFQjCNEZkSNg7SD0ortJ3k-9y2RmD82lHA&sig2=Oxx9IDCLXS9p_zzMWD4etw) or server side script `php` — prasanth, May 29 '17 at 07:45
Welcome to SO. JavaScript is client side scripting which will do what have described just above. However there is a way to make it stick. Check this link out https://stackoverflow.com/questions/16206322/how-to-get-js-variable-to-retain-value-after-page-refresh — Syfer, May 29 '17 at 07:46
Possible duplicate of [How to get JS variable to retain value after page refresh?](https://stackoverflow.com/questions/16206322/how-to-get-js-variable-to-retain-value-after-page-refresh) — Syfer, May 29 '17 at 07:46

score 0 · Answer 1 · answered May 29 '17 at 07:43

Javascript manipulates the only current state of the Html, not the file on server side. To handle it, you have to store state on server side, and change it both client and server side on button click.

Storing changed value on browser's cookie or local storage, and get stored one on page load is another option.

score 0 · Accepted Answer · answered May 29 '17 at 07:47

On page reload obviously image is going to reset to the original image. To keep it as it is even after page refresh you can do,

Save the image in Cookie (base 64 format), but there is a size limit since you can save small size images only.
On image select, you can save the image file remotely on your server asynchronously (using AJAX) and you can recall the image using the server session.

NightKn8 · Answer 3 · 2017-05-29T11:06:42.697

localStorage example:jsfiddle

However localStorage can be easily cleaned by user, even by mistake. I have found this answer useful about how it can be cleaned: SO link. Other drawback (if your really care about it) is a need of use Inline styling. There is attr css function but other than content usage is currently limited so I would stick to Inline styling.
I made more understandable version including your code, here: jsfiddle, however I am not sure what this line and function suppose to do so I have removed it:

<div id="changed" onclick="change_DImage()">New Upload...</div>

Edit: obviously second jsfiddle code will not work on jsfiddle, you need to inject it to your code.

Change background image with javascript

3 Answers3

Change
background image with javascript