Yooo ninjas. So in this CSS tutorial, I’ll be imparting some extra background property wisdom. More specifically, I’ll be teaching you about the awesomeness of multiple backgrounds!

First of all we’ll talk about how to add in multiple backgrounds to the background-image property. Then we’ll use our ninja powers to tweak the background-repeat, background-size & background position properties so that they look nice on a web page.

Peace out, have fun & keep coding :).


========== CSS for Beginners Playlist ==========
========== HTML Basics Course ==========

========== The Net Ninja ============

For more front-end development tutorials & to black-belt your coding skills, head over to – or

========== Social Links ==========

Twitter – @TheNetNinja –


  1. Found it very hard to make two background images, first url(), link pops up automatically, the second one is not. So I went longhanded version, and added another line with backround-image: url(), and then paste it. Is there a shorter and more simplistic way? Images are stored in parent folder of articles.html file.

  2. Is there any way to apply specific styling to the first background image in CSS? I have some CSS3 code to make an image glow on hover but want it to only apply to the first background image, is there any way I can do this without it applying to both?

  3. First of all thank you million times for your wonderful tutorial, after checking so many tutorials really you are the best:)
    At background part could you please clarify background size: cover / contain
    Please keep going appreciate your effort

  4. Hello sir, what if I have 3012px by 2304px picture and I want to re-size it and fits it in 600px width and 500px height block, is it that possible ?


Please enter your comment!
Please enter your name here