How to make background image in HTML | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 2

How to make background image in HTML

I'm not satisfied with html plain color background that use "bgcolor". How I could fill the background with width size picture?

20th Jun 2018, 5:04 PM
Muhammad Fadhil Adha
Muhammad Fadhil Adha - avatar
16 Answers
+ 7
you can add background-repeat: no-repeat; background-size: 300px 100px; to the style after the semicolon ";" Feel free to adjust the background-size, the first number is for width and the second is for height. don't forget to add background-repeat : no-repeat to make sure it's not become like desktop wallpaper
20th Jun 2018, 5:25 PM
Sebastianus Bara Primananda
Sebastianus Bara Primananda - avatar
+ 7
You can do that in CSS: background: url(.......) no-repeat center center fixed; background size: cover; That's it. It will work 100%. you can remove *fixed* from there if you want your image to move while scrolling down
20th Jun 2018, 9:52 PM
Manish Kumar
Manish Kumar - avatar
+ 6
Thank you sir 👍
20th Jun 2018, 5:26 PM
Muhammad Fadhil Adha
Muhammad Fadhil Adha - avatar
+ 5
By changing the padding value Image size will change also
20th Jun 2018, 5:26 PM
Mahmood Garshe
Mahmood Garshe - avatar
+ 4
actually this is how it works : the background size is depend on the element size in default, so when you expand the element by adding padding or set width or height it also affect the background. But you also can make the background image have fix size by adjust it using "background-size"
20th Jun 2018, 5:30 PM
Sebastianus Bara Primananda
Sebastianus Bara Primananda - avatar
+ 4
background img src = ""
20th Jun 2018, 7:17 PM
Kanishk Mewal
Kanishk Mewal - avatar
+ 3
{Background-image: url(....) ;}
20th Jun 2018, 5:17 PM
Mahmood Garshe
Mahmood Garshe - avatar
+ 3
could you guys tell me how to set the size of the picture?
20th Jun 2018, 5:20 PM
Muhammad Fadhil Adha
Muhammad Fadhil Adha - avatar
+ 3
Use: Padding To set the size
20th Jun 2018, 5:24 PM
Mahmood Garshe
Mahmood Garshe - avatar
+ 3
Ex : { Padding:40 px Background-image:url(...) }
20th Jun 2018, 5:25 PM
Mahmood Garshe
Mahmood Garshe - avatar
+ 2
you can use background-image. For example : <div style="background-image: url(images/cute-kitten.jpg);"></div> I hope this can answer your question
20th Jun 2018, 5:16 PM
Sebastianus Bara Primananda
Sebastianus Bara Primananda - avatar
+ 2
<div style="background-image: url(images/example.jpg);"></div>
20th Jun 2018, 9:11 PM
Here to help problems!
+ 2
you can add background-repeat: no-repeat; background-size: 300px 100px; to the style after the semicolon ";"
22nd Jun 2018, 8:28 AM
Alex
Alex - avatar
+ 2
.test { background-image: url (1.jpg), url(2.jpg); background-repeat: no-repeat; background-position: left top , right top; }
8th Jan 2021, 7:31 PM
Pascal Mabuye
Pascal Mabuye - avatar
+ 1
you can use this background-image: url("image path") the url could be a path or a link i hope that 'll help
26th Jun 2018, 8:57 AM
OSAMA TAHA
OSAMA TAHA - avatar
0
How do you align the background in CSS?
9th Jul 2018, 3:31 AM
Noah Garza
Noah Garza - avatar