CSS Tutorial For Beginners 46 - Multiple Backgrounds

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 ============

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

[asanuwabenjamin]

Thank you so much. This is what i have been looking for ever since

[srehabs]

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

[AustinNotAustin]

It only took 46 videos you you to alt+tab to the other window haha!

[rudyboy]

I was using linear gradient before I know it’s for colour I thought it can work for image too lol thanks 🤛🏽

[herrflick]

Thank's a lot sir, your tuts are just amazing!

[GormGear]

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?

[dipeshsapkota]

How do i make multiple background responsive according to different screen size ? I set multiple background image for mobile screen size but i am not able to scale it up for desktop viewport.

[frownless]

Am kind of confused when u use 2 images does the first one go behinde and the second infront, cause the ninja logo is infront shouldnt it be behinde?

[myfoodnovel]

How can i give space between repeat backgrounds ?

[hypnobear]

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.

[ahmedimam]

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 ?

[sab_tech]

how you created that images repository????

[bpdobson]

maybe should have explained the nature of .PNG images as if you tried that with two .JPGs it wouldn't be so pretty..

[richarddukard]

Works in dreamweaver, doesn't work Microsoft studio code.

[ikuzoburandeon]

l see, thanks. But what if i want a linear gradient as my background, how do i do that?

Can i combine linear background and image?