Background | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

Background

Can you change the background of something in web(HTML/CSS/JavaScript) to an image, if so how?

22nd Jan 2018, 12:53 AM
eee
14 Answers
+ 4
Yep! To set a background image, just add the background-image attribute to the body in CSS followed by the URL of the image you want to set as your background: body{ background-image: url("example.png"); }
22nd Jan 2018, 12:58 AM
Faisal
Faisal - avatar
+ 3
@Faisal Thanks!
22nd Jan 2018, 1:00 AM
eee
+ 3
@Faisal Thank you so much!
22nd Jan 2018, 1:31 AM
eee
+ 3
@JobyJem No problem! 😉
22nd Jan 2018, 1:32 AM
Faisal
Faisal - avatar
+ 3
@Faisal I forgot to public it after latest update lol, it’s up now
22nd Jan 2018, 1:58 AM
eee
+ 2
@Faisal can you help me with my other question, lol
22nd Jan 2018, 1:21 AM
eee
+ 2
@JobyJem Of course! What do you need help with?
22nd Jan 2018, 1:22 AM
Faisal
Faisal - avatar
+ 2
@Faisal It’s ‘How to fix my background image?(CSS)
22nd Jan 2018, 1:24 AM
eee
+ 2
Well, what you can do is set your background size. This can be done by using the background-size attribute in the body and setting it to 100% twice: body{ background-size: 100% 100%; } Then, you can set the attribute background-repeat to none which stops the background from being littered all over the page: body{ background-size: 100% 100%; background-repeat: none; } Then, by putting it all together, your background should hopefully not look like a jarbeled mess all over the screen: body{ background-size: 100% 100%; background-repeat: none; background-image: url("example.png") }
22nd Jan 2018, 1:30 AM
Faisal
Faisal - avatar
+ 2
@Faisal Read the beginning alert of Polarize!
22nd Jan 2018, 1:51 AM
eee
+ 2
@JobyJem I can't seem to find it for some reason :/ Could you provide a link to it?
22nd Jan 2018, 1:55 AM
Faisal
Faisal - avatar
+ 2
Oh yeah, I just found it. Thank you very much for that! It means a lot to me that you added that into your code! I will be glad to help you out with anything else you need in the future 😁
22nd Jan 2018, 2:01 AM
Faisal
Faisal - avatar
+ 2
@Faisal You don’t need to thank me!
22nd Jan 2018, 2:13 AM
eee
+ 1
For background no repeat, fixed, image and cover: .class{ background: url("example.png") no-repeat fixed center / cover; }
22nd Jan 2018, 4:59 PM
Josimov Dejan
Josimov Dejan - avatar