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

[ad_1]
This background-image tutorial is part of my premium 9 hour HTML & CSS video course:

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


Posted

in

by

Tags:

Comments

35 responses to “CSS Background Image Tutorial: Lecture 37, Web Design for Beginners Course”

  1. najit khan rachan din Avatar

    Perfectly explained. This video helps me a lot understanding coding. I am not a programmer by profession . Learning now. coding language is so alien to me. Video above helped me a lot. thank you for the info.

  2. matuto2007 Avatar

    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!

  3. ray tulika Avatar

    Give a web gallery page tutorial please

  4. Borzi Avatar

    Should note that without Background Colour the image won't appear.

  5. Laura Lawson Avatar

    My background image is not 'cover-ing.' or resizing. Is there any reason why this might be happening?

  6. Roman Chalupa Avatar

    Great work, you really helped me a lot. Now i understand it 🙂 Awesome. Thanks once again, i am liking and following from now.

  7. Shivam Vyas Avatar

    You're a life saver!

  8. Junn Barrer Avatar

    Simply awesome tutorial! Congrats!

  9. Adit Azad Avatar

    Problem solved.. 🙂 thank you so so much .. i really like ur lesson ..

  10. Md Shikot Avatar

    you are boss
    I learn a lot from you. I had problem about background image. It's solved now.
    thanks for cool lecture…

  11. SSKDev Avatar

    Wow of all the videos I've seen this is the easiest to understand.!!!

  12. Sarah Wayhaught Avatar

    w3schools.com is a big help for everybody with so much information in it.

  13. Abh19021 Avatar

    exact 70k subs. Congrats

  14. Rahul Ubaldo Avatar

    Thanks for the tutorial! Wish you a happy day!

  15. samirs1000 Avatar

    Nice video, really clear explanation. Perfect for what I was looking for, thanks

  16. John Partridge Avatar

    very well done. 🙂

  17. windbreeze tv Avatar

    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

  18. GrinTim Avatar

    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:;
    }

  19. Loretta Cobbson Avatar

    you taught so clearly. kudos to you!!!

  20. Chrysta Gregory Avatar

    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.

  21. Damien Warr Avatar

    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);
    }

  22. Anjana Chaurasia Avatar

    it really worked. Now can you please tell how to create a attractive login page sir!

  23. Ivokin Avatar

    very helpful thank you

  24. Aemon Warrick Avatar

    That was excellent!!! Thanks!

  25. Štěpán Přibyl Avatar

    Sooo good. Totally love it, thank you very much 🙂

  26. cenotal studio Avatar

    you did not show first step

  27. kem mrthappy Avatar

    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

  28. Kosta Kuzmanovic Avatar

    Very helpful, thank you!

  29. Malek Zalfana Avatar

    You talk like Bill Gates! Great video by the way.

  30. kalenshi katebe Avatar

    thank you for this wonderful video. i learned tones

Leave a Reply

Your email address will not be published. Required fields are marked *