#26 CSS Backgrounds - CSS Full Tutorial

In this lesson we take a look at the CSS Background property in detail, with examples for each keyword.
The shorthand CSS Background property order:
background-image
background-position / background-size
background-repeat
background-attachment
background-origin
background-clip
background-color
This lesson is part of a wider CSS Full Tutorial which you find here: • #1 - What is CSS? - CS...
👆SUBSCRIBE and hit the BELL NOTIFICATION 🔔: goo.gl/nYLZvz
------------------
👈 😃 PREVIOUS VIDEO: • #25 CSS Positioning - ...
😎 👉 NEXT VIDEO: • #27 How to use the CSS...
------------------
👍 CSS FULL TUTORIAL: • #1 - What is CSS? - CS...
------------------
👍 HTML FULL TUTORIAL: • #1 - What is HTML used...
------------------
Text editor used in this lesson: Brackets - brackets.io/
------------------
FACEBOOK: / devdreamercode
TWITTER: / devdreamercode
👆SUBSCRIBE and hit the BELL NOTIFICATION 🔔: goo.gl/nYLZvz
------------------------------------------------------------------------------------
Learn with Dev Dreamer! Step by step and simple to understand :-)

[@cursor1245]

Love this style of explaining. Short and fast but got everything I need. Thanks!

[@Max-Kramer]

It's been 4 years. And I want to thank you - it was helpful. I also like how you explain the material, considering different situations and solutions.

[@farazk9729]

You're a great teacher; you know how to think like a student. Thanks!

[@DevDreamer]

Hey Faraz, thank you. I believe ultimately we are all students, even us teachers, there is always room to learn and grow. Thanks for watching 🙂👍

[@kahitanongmaisip9358]

sir the image file sonic you have to download it first then incoding it in and typing the name of the downloaded image?

[@ShermukhammadKarimov]

Thank you for the seamless explanation. This helped me a lot.

[@kWithnoVideosChallenge-hs5yn]

You answered all my questions that I didn't even know I have them.👍 Thank you for making this great content really helpful:)

[@bruhmoment3731]

This is so helpful! Thank you!

[@AlessandraHudson]

Excellent painless introduction, thank you!

[@OneBrokeBloke]

This was exactly the level of basic i wanted, ty

[@kWithnoVideosChallenge-hs5yn]

thanks, You covered a lot in a 12 min video.

[@giorgijanishi5489]

Thanks for your excellent explanation

[@Excel-yt5dq]

Thank you so much I really love the explanation ❤👏

[@johny962]

Thank you very much!

[@maweryoutube9852]

Amazing again and again

[@cabdikaficiise7682]

Dev Dreamer thanks you , background property is very usefull of css , this course i learned background propery and how to work or relation and the content to one another

[@levi3514]

Thanks a lot ❤ you are an awesome 🤩 teacher

[@peter-jb]

Nice video dude.

[@prathyushsunny]

Thank you!

[@rahmathrahmath5861]

I have one problem whenever I add backgrounds (like gradients or images) it automatically splits into parts. I have given background-size: cover; and background-repeat: no-repeat; everything in a right way, but my display is still splitting (gradients splits into three parts and background image becomes broken two parts.

[@peguisreal]

Thanks for the shortcut

[@DevDreamer]

Thank you for watching Sarvananda 🙂👍

[@user-rm1ly5jv3t]

thanks you brouther for the best video.....!!!!!

[@DevDreamer]

You’re welcome bro 👍

[@ellen_good3924]

Thatnx!
P.S like ur accent 👍

[@DevDreamer]

Thank you! 🙂

[@mahmoudmohamed-xu2lb]

how to make the effect of code in html shows in google chrome without reload

[@vugarbakhshalizade2826]

With JavaScript's Template Literals, I believe.

[@thecrossedtheroadfund4289]

Sure, but how to change the body background color?
#internetbreaks

[@DevDreamer]

Hey thanks for watching 🙂 you can change the body background colour like this:
body {
background-color: red;
}

[@learntheweb-dj2kx]

background: [background-image ] [background-position ] / [background-size ] [background-repeat ] [background-attachment ] [background-origin ] [background-clip ] [background-color ];

[@Henrcastro]

tu e pika mano

[@gayatrikshirsagar7228]

In which app you do this programs
App name plz sir

[@DevDreamer]

Visual Studio Code 👍

[@gayatrikshirsagar7228]

But it's paid app sir

[@DevDreamer]

Visual Studio Code is free to download 👍

[@gayatrikshirsagar7228]

@@DevDreamer haa...! Yes sir.

[@gayatrikshirsagar7228]

Apka jaisa live changes nahi ho rahe ha
Immediately output nahi aa raha ctrl+s press kar na baad output aa raha ha.....
Live kaise kare sir please 🙏 uspar ek video daal do

[@netsaosa4973]

sonic

[@fandydancer]

why after a break from speaking do you want until you have to talk again to breathe?

[@DevDreamer]

@fandydancer7284 what on Earth are you going on about?

[@Max-Kramer]

@@DevDreamer LoL :D He doesn't want you to breathe. Indeed, why should you breathe? :D

[@DevDreamer]

Lol 😵😆

[@rahmathrahmath5861]

I have one problem whenever I add backgrounds (like gradients or images) it automatically splits into parts. I have given background-size: cover; and background-repeat: no-repeat; everything in a right way, but my display is still splitting (gradients splits into three parts and background image becomes broken two parts).

[@DevDreamer]

Hey Rahmath, can you link to your code? Perhaps by using something like code pen 👍

[@rahmathrahmath5861]

@@DevDreamer Thank you for asking, finally it came with no errors
Now no problem for me.

[@DevDreamer]

@@rahmathrahmath5861 Awesome 🙂