HomeОбразованиеRelated VideosMore From: LearnWebCode

CSS Background Image Tutorial: Lecture 37, Web Design for Beginners Course

1135 ratings | 166729 views
This video is part of my HTML & CSS video course: https://www.udemy.com/web-design-for-beginners-real-world-coding-in-html-css/?couponCode=YOUTUBEDEAL Learn how to add background images with CSS (repeat or tile, position, size, and multiple images assigned to a single element). If you want a full screen background try applying these background image techniques to the "html" or "body" element. If you want a "fixed" or "sticky" background image try adding the following declaration to the relevant CSS rule: "background-attachment: fixed;" Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow me on Twitter for updates and cat pics: https://twitter.com/learnwebcode
Html code for embedding videos on your blog
Text Comments (84)
muhammad umer (1 day ago)
Excellent explaining background property.. thanks. sir kindly make one more complete tutorial on pseudo classes and pseudo elements in css3 thanks for making this Marvellous tutorial ..
many many thanks bro..
am happy for coming across this video.
Bala Krishna (27 days ago)
marva mcneish (4 months ago)
i need your help i wanna design my page
abhishek sen (4 months ago)
Nicely explained. Thanks!
Wb Designer (5 months ago)
awesome at last ı found what ı need thanks amazing tutorial
Alan Walker (5 months ago)
thank you
Kristen McWilliam (5 months ago)
I love your videos! I was having big trouble with this feature, and as usual you cleared it right up. Please keep making videos, your html & CSS tutorials have helped me more than any other youtube channel :)
Vinay Kumar (6 months ago)
Idiot... First show us html code.. every time showing CSS only.. Stupid fellow..
Jefry tc (7 months ago)
muchas gracias ! excelente video me ayudo mucho
Sunil Kumar (8 months ago)
Why no option to purchase the course using e-banking available on Udemy?
rhick eleuterio (9 months ago)
where can i get your complete tutorial from this video? from the very beginning up to this? thanks in advance
Norberto Hernandez (10 months ago)
Excellent work, thanks and greetings from Mexico
Christopher Gaines (10 months ago)
Wow!!! I know this was published a few years ago, but I am learning HTML and CSS, and about to learn Java Script and Jquery. But I bought a book by Jon Duckett and looked all over the place online and nowhere at all do they mentioned the helpful information that in CSS it's going to be looking in the CSS folder, so you have to use the ../ to get it out of the CSS folder. Thank you so so much! I was very frustrated until I watched this video!
eddieisfiction (3 months ago)
Keep in mind .. isn’t the only thing. I didn’t have a css folder, just one file for practice. Each dot gets you out of one thing. So if you are in the same folder, just do one dot. 3 folders? Use 3 dots. I discovered really fast when I realized I wasn’t set up the same way. Just in case you guys didn’t know.
Hasib Pranto (4 months ago)
The way that you simplify things is phenomenal. There are countless tutorials out there which cover same topics but few that explain them as well as yours. Knowing and teaching are two separate skill sets and you have them both. Keep up the good work.
Stephan Romans (10 months ago)
Take my money
Stephan Romans (10 months ago)
i.e, well done. Thank you for this informative & well organized video.
Eva B (11 months ago)
Like your video! It’s at a great speed and you actually sound like an educator. Keep up the great work!
Jfred05 (11 months ago)
This was awesome man! Thanks for your excellent work!!
rukesh shrestha (1 year ago)
Thank you so much . my page did't show the images but after watching this tutorial my page work 100%.
A.I.A (1 year ago)
Hamza Basheer (1 year ago)
i have 4 codes background-color:#58D68D; background-image:-webkit-(blackblue); background-image:-moz-gradient(black,blue); background-image:-o-gradient(black,blue); background-image:-ms-gradient(black,blue); background-image:-chrome-gradient(black,blue); background-image:linear-gradient(black,blue); i want to remove the blue color and put image but how i can put it in css file?
Flash League (1 year ago)
Love the video! I am working on my web design webpage as I am watching this!
akmaza ary (1 year ago)
thanks !
matuto2007 (1 year ago)
Thanks Sir for sharing your knowledge about CSS with us. In my case, it is helping me a lot. I'm not a web developer and now I start to understand this thing called CSS that sounded like the Chinese Language to me. Thanks very much!
ray tulika (1 year ago)
Give a web gallery page tutorial please
Borzi (1 year ago)
Should note that without Background Colour the image won't appear.
Blaze21ification (7 months ago)
Thank you for that, kept wondering why it wasn't working
dinofauro :D (1 year ago)
Laura Lawson (1 year ago)
My background image is not 'cover-ing.' or resizing. Is there any reason why this might be happening?
Roman (1 year ago)
Great work, you really helped me a lot. Now i understand it :) Awesome. Thanks once again, i am liking and following from now.
Shivam Vyas (1 year ago)
You're a life saver!
Junn Barrer (1 year ago)
Simply awesome tutorial! Congrats!
Adit Axad (1 year ago)
Problem solved.. :) thank you so so much .. i really like ur lesson ..
Md Shikot (1 year ago)
you are boss I learn a lot from you. I had problem about background image. It's solved now. thanks for cool lecture...
SSKDev (1 year ago)
Wow of all the videos I've seen this is the easiest to understand.!!!
Sarah Wayhaught (1 year ago)
w3schools.com is a big help for everybody with so much information in it.
Tonka Manage (7 months ago)
YES, just reading through the whole thing is far better than anything else that is free out there
Syaredza Ashrafi (1 year ago)
WhyNotEveryThing (2 years ago)
exact 70k subs. Congrats
LearnWebCode (2 years ago)
Raúl Ubaldo (2 years ago)
Thanks for the tutorial! Wish you a happy day!
Petra Cubelic (2 years ago)
your videos are amazing
samirs1000 (2 years ago)
Nice video, really clear explanation. Perfect for what I was looking for, thanks
John Partridge (2 years ago)
very well done. :-)
windbreeze tv (2 years ago)
Have a question in external stylesheet the  background-image:url(""); first  parenthesis shows up a different color which causes the style to not work.  It happens when I add  quotation marks inside the url.   But everything works fine when I don't separate the html from the css3
GrinTim (2 years ago)
Thanks for thet! Very informativ! I have question - why whith all of this properties my image is going out of borders of the body, a little? I will be appreciated for you halp. body{ background-size:cover; background-position:center center; background-repeat:no-repeat; background-image:url(SoundFactory.jpg); background-color:; }
Loretta Cobbson (2 years ago)
you taught so clearly. kudos to you!!!
Chrysta Gregory (2 years ago)
Great video, but ya see. I'm kinda in a pickle. My mom wants me to make her a website and she wants the background to be a certain image instead of just a solid color. Beginner stuff I know, but I forget how to do that. I need help.
Ao-No ichi (2 years ago)
Example: body { background-image: url (///c:/User/Person/Downloads/pic.jpeg); background-size: cover; } I'm a newbie so take this with a grain of salt. There's a good chance I'm wrong, but then again I *think* I've understood this. Haven't tried it out yet tho. Also, I don't know if that's gonna be the way you want it or if you were asking for sth. different. Might've misunderstood you. Hope it works...
Damien Warr (2 years ago)
You are full of shit! this does not work and i have the same relative path as you! .bodyone{ float: left; width: auto; background-image: url(../images/mypic.jpg); }
Christopher Hansen (2 years ago)
damienw arr, youre a scrub.
Renard Argenté (2 years ago)
Anjana Chaurasia (2 years ago)
it really worked. Now can you please tell how to create a attractive login page sir!
Ivo Ivanov (2 years ago)
very helpful thank you
Aemon Warrick (2 years ago)
That was excellent!!! Thanks!
Štěpán Přibyl (3 years ago)
Sooo good. Totally love it, thank you very much :)
40831 Music (3 years ago)
great tutorial. good job slowly explaining everything in full detail.
cenotal studio (3 years ago)
you did not show first step
kem mrthappy (3 years ago)
hi watching this amazing videos has been preety helpful ,but i still want to ask iff you have videos on how one can integrate paddings and margins to give spacing to columns in html !!! that will be really helpful ..thanks a gain for an amazing videos really helped a whole lot
Kosta Kuzmanovic (3 years ago)
Very helpful, thank you!
Malek Zalfana (3 years ago)
You talk like Bill Gates! Great video by the way.
kalenshi katebe (3 years ago)
thank you for this wonderful video. i learned tones
E.Lxo (3 years ago)
I tried everything... doesn't work .
eddieisfiction (3 months ago)
I had to adjust what he was doing. For example, I didn’t have a folder with folders inside which then had files. I had 1 folder with all the files inside. So instead of ../, I used ./ Each . Backs you out starting with the current file, then folders after that. / gets you back into something if you name it right after. I had trouble for a second until I thought of what was happening.
Alan Walker (5 months ago)
100% working
TenthYoung (5 months ago)
sounds good... doesn't work
AngelinBondage (3 years ago)
Excellent. I will now use background images. I did not know the CSS property "cover". Thats easy now. Thank you for sharing. Keep up the good work.
ahmad gharib (3 years ago)
what is this software ur working on ?
Angel Moreno (3 years ago)
How do I get my text to align left that sits over the image? I did the property text-align: left; but It still does not fully align left to the edge of the picture. here is what I have coded in my html5 doc and css doc. HTML: <div class="beach"> <h3> Background Image </h3> <p>This is the forth image set as background image and set in h3 element.</p> </div> CSS: .beach{ background-color: #c2bbb1; background-image:url(../images/beach.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; margin-left: 14.25%; padding: 50px 0; width:1020px; }
odeh azmi (3 years ago)
Give your tag an absolute positioning
WahiduL IsLam (3 years ago)
your just awesome man :D
Raghavendra Padasalgi (3 years ago)
will some one advise me the full code of css and html as I am new to this. thanks
Kat Risley (1 month ago)
this website is helpful: www.w3schools.com it has sections on html and css that are very clear and complete.
Valerie Verdin (3 years ago)
Thank You for these videos. It is making my online college course make sense. You are a great teacher!
Shravan Mishra (4 years ago)
Thank You !!!
lu lu (4 years ago)
Oh no! Where have gone "Hello everyone!" ?
LearnWebCode (4 years ago)
+lu lu Haha, I will be sure to add the greeting back to the next video :)
rofischerl (4 years ago)
Very good tutorial, thanks. Robert from Bavaria.
Alessandro Scaltritti (4 years ago)
stunning tutorial!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.