How to add images (background) in JavaScript? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 1

How to add images (background) in JavaScript?

28th Feb 2020, 11:06 AM
Taraash Mittal
Taraash Mittal - avatar
7 Answers
+ 11
window.onload = () => { document.body.style.backgroundImage = "url('https://i.picsum.photos/id/774/536/354.jpg')"; Or const body = document.querySelector('body'); body.style.backgroundImage = "url('https://i.picsum.photos/id/774/536/354.jpg')" };
28th Feb 2020, 12:36 PM
Vinay_GB
Vinay_GB - avatar
+ 6
Yes, Sick L̲̅i̲̅n̲̅e̲̅ B̶r̶o̶🌡️bro. I agree with you. 👍😄 It took me some time to research to know the use of a single quote with URL. https://stackoverflow.com/q/35402598/11325172 I found this thread on StackOverflow, similar to my query. :)
28th Feb 2020, 1:23 PM
Vinay_GB
Vinay_GB - avatar
+ 5
window.onload = () =>{ let elem = document.body; elem.style["background-image"] = "url(https://picsum.photos/536/354)"; }
28th Feb 2020, 11:46 AM
🇮🇳Omkar🕉
🇮🇳Omkar🕉 - avatar
+ 5
"... that is totally not required. Even that double quote or single quote causes issue with some Version of IE 😂 of course i know no one care about that." Thanks Sick L̲̅i̲̅n̲̅e̲̅ B̶r̶o̶🌡️ bro for letting me know about that issue. 😉 "The format of a URL value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URL itself..." Also, According to W3C standard it's optional. :P https://www.w3.org/TR/CSS2/syndata.html#value-def-uri
28th Feb 2020, 1:13 PM
Vinay_GB
Vinay_GB - avatar
1st Mar 2020, 5:30 AM
Tanmay Gupta
Tanmay Gupta - avatar
+ 2
Thanks everyone guys😃😃
28th Feb 2020, 2:03 PM
Taraash Mittal
Taraash Mittal - avatar
0
You could probably do it in html but in javascript I have no idea
29th Feb 2020, 4:58 PM
ReidyQ